嵌套网页iframe 父子页面的数据 相互读写

已于 2022-10-10 22:39:43 修改
阅读量640 收藏
点赞数
分类专栏： JS 文章标签： javascript html
于 2020-02-27 16:42:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45062275/article/details/104539001
版权

在父页面中获取子页面的window对象和DOM

parent.html 文件

<body>
<div id=‘parentDom’>parentDom</div>
    <iframe src="./children.html" id="iframeId" height="150" width="150"> </iframe>
</body>
<script type="text/javascript">
    window.onload = function () {
      // 子页面的window对象
        var _childrenWindow = document.getElementById('iframeId').contentWindow
     // 子页面的DOM
        var _childrenDom=_childrenWindow.document.getElementById('childrenDom');
    }

在子页面中获取父页面的window对象和DOM

children.html 文件

<body>
    <div id="childrenDom">
        children页面
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
       //父页面的window对象
        var _parentWindow = window.parent
      //父页面的window对象
        var  _parentDom = parentWindow.document.getElementById('parentDom');
    }
</script>
Enjoy-li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
vue + iview页面Modal中内嵌Tabs，每次打开的时候Modal时默认选中Tabs的第一项
lchmyhua88的博客
12-02 2710
文档中说激活面板的name用value，页面第一次加载的时候可以，放在modal里就不好使了，每次打开的时候，当前激活的tab总显示上一次离开时的界面。
iview实现表格的expand和编辑功能
wytraining
09-08 1588
iview表格实现的编辑和expand功能
iview table数据直接导出_iview如何导出嵌套表格的数据？
weixin_39955938的博客
12-22 533
iview表格是嵌套表格，就是每个columns中有个children属性，依然嵌套多个列，我按iview官方文档导出数据，没有数据。导出之后如图：exportData (type) {if (type === 1) {this.$refs.table.exportCsv({filename: 'The original data'});} else if (type === 2) {this.$...
iframe如何获得父页面的值
凌于淳风的专栏
03-04 2493
iframe如何获得父页面的值今天在项目中遇到，需要把父页面的值传到iframe页面，搞了半天终于搞定，经验和大家分享。1.主页面parentofiframe.html                                            2.iframe页面iframe.htm               function Show()    { var t=parent.d
vue 打印html ＜iframe＞标签（内容打印）超详细
weixin_45137175的博客
07-12 2011
今天领导给了个需求，需要配合其他项目组给一个公共组件的npm进行,公共组件打印，打印操作由这个npm包来操作。（经过开会商讨，最后决定配置一个path路径，来展示页面，然后我负责在公共这里打印相应页面内容。）在这之初都是好着的，首先进行配置，这里只需要一个input框来给后端传值就可以了，这一步没什么好讲的，
【Vue】Vue父页面与iframe内嵌html子页面互调，传参问题
JeffHan^_^的博客
03-02 2370
记录一个开发过程中遇到的问题，Vue项目中嵌入了一个iframe，iframe里面的是一个html的页面，这时候想Vue和这个html之间来回互调传参，下面提供解决思路。 1.Vue调用iframe子页面中的方法 这里有一个index.html里面有这样的一些方法 <script> function ToFreeCameraFunc() { unityInstance.SendMessage("ROAM", "FreeCameraClick"); } functi
iframe父页面调用子页面方法，并且获取数据（无跨域）
weixin_48195664的博客
06-16 2274
以上就是 iframe父页面调用子页面方法，并且获取数据（无跨域）最难部分就是跨越了。一定要注意：父子页面两边都要监听，子页面监听父页面传过来的参数，再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。(注意：VUE的话将此方法写在mounted里边，如果是多次调取此方法的话，就换成window.onmessage=(e)=>{}2. 监听父页面传过来的参数来判断调取哪个方法。
window.open 打开窗口的子画面向父级画面传值并返回父画面(幅画面不刷新)
Mr_Four
07-17 1403
window.open 打开窗口的子画面向父级画面传值并返回父画面(幅画面不刷新); window.open("", parentWindow.name).focus();
iframe获取父级标签及控制父级样式
weixin_45932157的博客
09-06 1199
3.设置iframe 父级id为.mask 设置css样式。1.获取iframe 的父级id 为mask的内容。2.控制iframe 父级 id为mask绑定事件。
嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip
01-06
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...
div嵌套html不用iframe
12-13
最近在做作业中需要在不用iframe的情况下嵌套页面，所以只好在div中嵌套，用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....
iframe之间的通信方式的实际应用---在Vue框架下获取数据、处理文件上传和跨窗口通信
m0_56347363的博客
12-06 1260
window.top--- 获取顶层页面window对象---只能用于同源下，否则获取不到外层页面的信息。window.parent--------获取父页面window对象，如果没有父页面将返回自身。如果是跨域的页面，需要拿到消息接收页面的 contentWindow 才可以发送。实现html主页面嵌套html子页面，父子页面间的传值有以下两种方式。
iview form组件，当formItem嵌套使用时，formData会是多层结构的json数据，导致async-validator验证插件失效
关注前端，关注原创
10-30 515
在项目中遇到个多层的json数据渲染到页面中，第一层渲染成卡片，第二层渲染成列表，第三层才真正渲染成input标签的场景。这种多层form数据的场景，无法在form标签中定义:rules变量来实现表单验证。最终实现的效果如图：第一个卡片两条数据之间的验证互不影响，第一个卡片和第二个卡片之间互不影响，而所有卡片都由一个form渲染，这样有利于直接生成一个formData。这段代码要在项目中删了，所以简单记录下，免得后面忘了。
iframe简单使用 、获取iframe 、获取iframe 元素值 、iframe获取父页面的信息
热门推荐
m0_63348818的博客
06-19 4万+
标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 注意：URL建议用绝对路径 如果一个页面里面有框架，点页面里的连接，要求在这个 里打开。在中规定name 然后在修改默认打开模式，：网页head中加上或部分连接的目标框架设为（**）要插入一个页面。要求只拿中间一部分。其他的都不要。代码： 控制插入页被框架覆盖的深度 控制框架覆盖上部分的深度 scrolling滚动条要否（auto、yes、no） frameborder框架的边框大小，width=776 height=2
外部操作获取iframe的东西
weixin_30736301的博客
04-27 173
原生js 　　 document.iframe[id].contentWindow.document.querySelector(el).innerHTML jq $(window.iframe[id].document).find(el) 转载于:https://www.cnblogs.com/lw-88238/p/8961088.html...
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9717
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 338
步骤很详细，直接上教程……
vue 给嵌套的iframe子页面传数据 postMessage
05-24
是的，可以使用 postMessage API 在 Vue 中给嵌套的 iframe 子页面传递数据。 具体步骤如下： 1. 在父组件中，使用 ref 获取 iframe 元素，例如： ``` <iframe ref="myIframe" src="子页面地址"></iframe> ``` 2. 在父组件中，定义一个方法来发送数据到子页面： ``` sendMessage() { const iframe = this.$refs.myIframe; const data = { message: 'hello' }; iframe.contentWindow.postMessage(data, '子页面地址'); } ``` 3. 在子页面中，监听 message 事件，接收父页面传递的数据： ``` window.addEventListener('message', (event) => { if (event.origin !== '父页面地址') return; const data = event.data; console.log(data.message); // 输出：hello }); ``` 4. 在子页面中，使用 postMessage 回传数据到父页面： ``` const data = { message: 'hi' }; parent.postMessage(data, '父页面地址'); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值