iframe嵌套页面开发的一些经验

于 2024-08-10 15:43:49 发布
阅读量308 收藏
点赞数 1
文章标签： iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44689966/article/details/141063178
版权

获取iframe子页面提示undefined

在这里插入图片描述
在这里插入图片描述
这里可能是在获取子页面数据的时候，子页面还没有加载完成，所以要等到子页面数据加载完成，在尝试了延迟获取之后还是不行，会提示报错
在这里插入图片描述
解决方法：使用vite做一下代理，需要修改三个地方
父页面项目
在这里插入图片描述
在这里插入图片描述
子页面项目
在这里插入图片描述
注意这里的 /faaa 要一致
效果：
在这里插入图片描述

对于判断iframe是否加载完成

上面使用setTimeout等待iframe加载完成的处理是不合理的，这里介绍一种方式在这里插入图片描述

前端开发：Vue中嵌套标签iframe的使用
全沾软贱开发攻城狮
10-20 1万+
前言 在前端开发过程中，往原有页面中嵌入新的页面的需求也是比较常见的需求操作，尤其是在比较复杂的必须要用嵌套的场景下。前端中使用嵌套的时候，需要用到的就是iframe标签，通过该标签可以规定一个内联框架，然后放入需要嵌套的新页面即可。本篇博文来分享一下关于iframe的使用方法，尤其是对于初级开发者来说尤为重要。 iframe 1、定义和使用 <iframe> 标签规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 2、使用说明 （1）可以把需要的文本放
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
weixin_39647499的博客
12-19 2065
做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...
iframe内嵌链接常见问题
一个希望世界和平的前端程序猿的博客
12-26 1万+
iframe内嵌链接常见问题
页面间嵌套的3种方法总结
qq_45682379的博客
07-08 2万+
1.为什么要复用页面 在很多的网站页面的header，footer都是复用的。 随便哪个网站：如哔哩哔哩官网 B站前面的导航栏（footer） 便是复用的，这块区域在整个网站的某些页面中是重复出现的，没使用复用前，最原始的方法就是把相同的代码复制粘贴到网站的每个页面，这样会使得我们整个网站占用代码的空间很大，而且出现大量出现冗余代码。 2.介绍三个页面嵌套的方法 1.通过iframe标签来为网页嵌套页面（JSP和HTML均适用）： 代码如下： <!DOCTYPE html> <html&
iframe异步加载和延迟加载
php-yyds
12-15 2199
iframe异步加载：通常情况下，浏览器会按照HTML文档的顺序加载页面中的元素，而iframe标签内的内容会阻塞主页面的加载。为了解决这个问题，可以将iframe的src属性设置为空，而将实际需要加载的内容放在一个data-src属性中，然后使用JavaScript动态加载iframe内容。这样，主页面会先加载完成，用户可以先看到主页面的内容，然后再加载iframe内容，提升了页面的加载速度和用户体验。延迟加载：延迟加载是指将页面中的某些资源（如图片、脚本等）推迟到页面其他内容加载完成后再加载。
javascript 改变Iframe的N种方法
chengmingwei的专栏
01-09 895
1种方法:      document.iframename.location="2.htm"   2种方法:      &lt;script&gt;     function   test(){     document.all.mxh.src="http://sohu.com"     }     &lt;/script&gt;     &lt;a   href=#   onclick="te...
在vue中实现嵌套页面(iframe)
10-15
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
iframe嵌套web纯前端页面，运用Bootstrap(v5.1)技术
09-18
iframe实现左侧菜单右侧页面简单示例。点击左侧菜单，右侧显示不同html内容，并加有css样式，美观实用。很简单的界面，没有多余功能。博文网址：https://blog.youkuaiyun.com/LawrenceUyi31?type=blog
实现iframe嵌套，适合CMS，CRM等后台框架
11-05
首先，要实现iframe嵌套，你需要在HTML代码中插入`<iframe>`标签。例如： ```html <iframe src="http://example.com/page.html" width="100%" height="600" frameborder="0"></iframe> ``` 这里的`src`属性指定了要...
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`iframe`元素的情况下将一个页面的内容嵌入到另一个页面中。`iframe`虽然提供了这种功能，但有时可能会带来一些问题，如加载速度慢、SEO优化困难等。在这种情况下，我们...
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 3万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
HTML/CSS 中如何进行网页嵌套？
m0_74744119的博客
02-03 2283
一、为什么会用到网页嵌套 做项目的时候，要写很多个页面，这时候就要用到网页嵌套，就是把子页面嵌套到主页面里，整个项目的功能才能实现。
如何将一个HTML页面嵌套在另一个页面中
十方地藏
04-23 1万+
这个在做网页中常要用到，有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含（引用）这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不需要每个文件单独修改。最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html文件里， 然后其他页面文件在页面内容的最后包含这个文件就可以了，具体例子下面有。要html文
html嵌套iframe如何实现等iframe页面加载完进行下一步调用
asartear的专栏
10-17 1万+
如果想在你的html里面显示一张图片，或者显示一个报表，经常会在里面嵌套iframe，当我们点查询报表时，在报表显示过程中，我们想做个遮罩层，提示等待...但是报表显示出来后，我们如何把遮罩层去掉，让报表更好的展示呢？ 我就用代码来解释一个例子吧： 这是在html的div里面嵌套一个iframe 发送url显示报表的js如下： var id ="#benefitnotic
iframe页面嵌套问题
weixin_44551909的博客
06-09 2万+
iframe页面嵌套问题 开发工具与关键技术：VisualStudio C# 作者：落灵 撰写时间：2019/6/8 一、 iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中，从而实现在一个固定的地方可以切换多个页面，并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容...
js判断页面嵌套的iframe是否加载完成
zzx3q的专栏
09-18 4551
/* *功能：导出Excel *参数： *返回值： *创建人：张正旭 *创建时间：2013-09-17 *说明： */ function exportExcel() { // 判断加载 if (appIframe.document.readyState != "complete") { event.returnValue = false;
layer在多层嵌套的iframe页面中关闭打开的layer弹出框的问题
汪原野
06-28 5256
layer父子层之间的常用操作 访问父页面的方法或者值的方法 访问父页面元素值 varparentId=parent.$("#id").val();// 访问父页面方法 varparentMethodValue=parent.getMethodValue();// 关闭弹出层的问题 大概分成以下三种情况： 对应当前页面的某个弹出层 var index=layer.open(...
解决iframe嵌套进来的页面操作父页面元素加载新页面的问题
weixin_41634885的博客
06-13 3239
一.场景： <!-- 这是load页面的标签--> <div class="side-right RIG-PAGE mgl-20" id="load-op" style="display: none; top: 20px"></div> <!-- 这是iframe页面的标签--> <div class="side-right RIG...
通过iframe嵌套页面传参
最新发布
01-04
### 使用 iframe 嵌入网页并传递参数 在 Vue 项目中，可以通过 URL 参数的方式向 `iframe` 中嵌入的页面传递数据。这通常是在设置 `iframe` 的 `src` 属性时完成的。 #### 设置 src 属性携带查询字符串 当创建 `<iframe>` 元素时，在其 `src` 属性后面附加查询字符串来发送简单的键值对给目标页面[^1]： ```html <template> <div id="app"> <!-- 将参数作为查询字符串的一部分 --> <iframe :src="'https://example.com/page?' + new URLSearchParams(params)" width="600" height="450"></iframe> </div> </template> <script> export default { data() { return { params: { key1: 'value1', key2: 'value2' } // 要传递的数据对象 } }, } </script> ``` 上述代码片段展示了如何构建带有查询参数的URL，并将其赋值给 `iframe` 的 `src` 属性。这里使用了 JavaScript 内置的对象 `URLSearchParams` 来方便地处理查询串格式化。 #### 在子页面接收父页面传来的参数 对于被加载到 `iframe` 中的目标页面来说，可以利用浏览器 API 获取这些参数。如果该页面也是基于 Vue 或其他前端框架开发，则可以直接解析 window.location.search 并提取所需的信息: ```javascript // 子页面 (即 iframe 内部) 可能会这样读取来自父级页面的参数 const urlParams = new URLSearchParams(window.location.search); let value1 = urlParams.get('key1'); // 获取名为 "key1" 的参数对应的值 console.log(value1); // 输出 "value1" ``` 这种机制允许父子文档之间安全有效地交换少量信息而无需复杂的跨域通信逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值