iframe 传值问题

最新推荐文章于 2022-09-28 17:56:12 发布
最新推荐文章于 2022-09-28 17:56:12 发布
阅读量684 收藏
点赞数
分类专栏： div+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyanwen888/article/details/8807839
版权

点击打开链接


当一个页面中插入了iframe或者由不同的框架组成（fieldset）时，这种情况下，需要处理的业务逻辑比较常见的就是数据进行交互了

1.页面中插入了iframe情况

由于页面中插入了iframe，那么iframe就是一种从属于主窗体的关系
当一个页面中插入了iframe或者由不同的框架组成（fieldset）时，这种情况下，需要处理的业务逻辑比较常见的就是数据进行交互了

1.页面中插入了iframe情况

由于页面中插入了iframe，那么iframe就是一种从属于主窗体的关系

主窗体要取得iframe中的值：window.frames["iframe的名字"].document.getElementById("");

iframe要取得主窗体中的值：window.top.document.getElementById("");

iframe要取得iframe的值:window.top.frames["iframe的名字"].document.getElementById("");

2.页面由<fieldset></fieldset>组成

页面间的关系都是平等的

假如存在topFrame和mainFrame

topFrame要取得mainFrame中的值：window.top.frames["mainFrame"].document.getElementById("");

备注:上面的top都是直接定向于主窗体

主窗体要取得iframe中的值：window.frames["iframe的名字"].document.getElementById("");

iframe要取得主窗体中的值：window.top.document.getElementById("");

iframe要取得iframe的值:window.top.frames["iframe的名字"].document.getElementById("");

2.页面由<fieldset></fieldset>组成

页面间的关系都是平等的

假如存在topFrame和mainFrame

topFrame要取得mainFrame中的值：window.top.frames["mainFrame"].document.getElementById("");

备注:上面的top都是直接定向于主窗体

在页面中引入iframe,parent跟top的作用是一样的。
但是在<fielde>情况下，parent是父窗体，top是顶级窗体

wuyanwen888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe与父页面传值(方法互调)
05-29
NULL 博文链接：https://skying007.iteye.com/blog/1044069
JS实现向iframe中表单传值的方法
10-20
主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下
关于Iframe之间以及与父窗体的值传递
weixin_33670713的博客
06-09 134
自己实现过了的,javascript脚本关于Iframe之间以及与父窗体的值传递,事件调用问题; 在父页面访问Iframe子窗体的txtAddress控件window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ; 在Iframe子窗体1访问父页面的TextBox1控件 , 子窗体1把值赋给...
iframe 传值
MichaelAn的博客
12-11 5868
父子 iframe 传值 最近项目中有个页面中使用到 iframe，涉及到不同 iframe 的传值等操作，踩坑不少，简单记录一下。 外部的页面成为父页面，内部嵌入的 iframe 称为子页面。一个父页面中可以嵌入多个子页面。不同子页面之间称为兄弟页面。 我需要做的就是：父获取子的属性、子获取父的属性。 父获取子的属性 首先界面中的 iframe 需要设置不同的 ID，这样父组件中，可以通过 document.getElementById 等获取对应的 iframe。 <ifram.
页面中iframe相互传值传参
10-29
兼容IE和火狐JS父窗口调用iframe里面的对象、函数的方法
JS中Iframe之间传值的方法
12-07
1.在iframe子页面中获取父页面的元素：  a>window.parent.document这个是获取父页面document中的对象；  b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法； 2.在父页面中获取iframe子页面中...
cross-domain-all:跨域、不同域iframe相互调用, iframe传值
05-02
cross-domain 跨域集成方案 点击主页 send Random ...1 添加依赖 ... <artifactId>cross-domain-lib <version>1.0-SNAPSHOT 2 添加映射 2.1 spring-boot ...import org.springframework.boot.autoconfigure.SpringBootAppl
iframe相关传值
小芳的专栏
07-30 298
前言： 最近写了几个简单的弹窗，iframe从主角-到渐渐低调，最近好像又变的高调起来。因为他在某些地方确实很方便。 就比如说最近有个需求：要求把公共的弹窗放到一个单独的页面中，并且在其他地方要求以iframe的形式引入过来。虽然不知道为什么这样要求。客户就是上帝，开做呗！废话不多说上代码。 主页面A： 代码： <iframesrc="B.html"frameborder="0"name="smIframe"id="smIframe"width="100%"height="...
Iframe之间传值
Samuel的博客
12-09 1016
Iframe之间传值和数据, 因为页面对像的不同, 一个ifram页面中的form值和数据直接get或Post都是传不到另一个iframe页面的, 设置taget也没有用,  在网上找了很久 没有很好的方法. 只有通过js来实现.     两个重要的javascript语句: top.result.document.location='result.html?data=' + data;
iframe传值方式
YhWyl527的博客
09-28 703
1
iframe传值问题
u011295864的博客
04-14 214
父组件中： <iframe width="100%" height="100%" :src="url" frameborder="0" ref="growth-plan-management" ></iframe> mounted() { let iframe = this.$refs['growth-plan-management'].contentWindow let para
iframe-父子-兄弟页面相互传值(jq和js两种方法)
热门推荐
态度决定一切
12-11 1万+
源码需要复制到相应的文件目录 文件目录： 效果图：（注意url协议不能以 filter:/ 开头） git地址：https://gitee.com/kaiking_g/iframe.git 项目结构： 1.父级html源码： main.html <!doctype html> <html> <h...
Iframe页面传值
独行侠梦的博客
05-10 1294
前言 在项目中用到了iframe划分左右窗体，这里记录一下如何传值的问题。 父窗口调用子窗口的function 其中gpsmap是子窗口的一个对象 officeContent是子iframe的id dataconfig是它的一个function $("#officeContent")[0].contentWindow. gpsmap.dataconfig(res["status"]); 子窗口调
怎样让一个div高度和浏览器高度一样
资深设计大师
04-17 6808
这个老生长谈的问题，不知困扰了多少前端开发人员，和后端程序员，其实很简单，这里写出来，让大家分享下，有很多人说，我已经设置div 100%了，怎么还没效果，我想说的是，有一个关键的东东，你没设置，html,body{height:100%;overflow:hidden;}哈哈，这回你会了吧，要同时设置。
div自动适应浏览器窗口水平和垂直居中
资深设计大师
11-07 1848
无标题文档 <!-- *{margin:0;padding:0;} #divcss{width:834px; height:550px; border:1px solid #9f9f9f; position:absolute;left:50%;margin-left:-417px;top:50%;margin-top:-275px;} --> 自动适应水平和垂直居中 原理就是:
多级栏目在前台展示的时候自动缩进(弄了N久才出来，谢谢姚邢辉哥们的帮助)
资深设计大师
03-08 1263
---网站栏目--- "> 　|_ 　|　|_ 　|　|　|_ 　|　|　|　|_ 　|　|　|　|　|_ |　|　|　|　|　|_ |  |　|　|　|　|　|_
div相对定位与绝对定位
资深设计大师
01-21 1196
绝对定位相对定位 * { margin: 0; padding: 0; } .fj1 { width: 150px; position: relative; height: 150px; border: 1px solid #000; background: #999; margin: 0 auto; } .zj1{ width: 50px; height: 50px; position: ab
iframe传值vue
最新发布
12-18
以下是两种iframe传值给Vue的方法： 1. 在Vue中给iframe传值 ```html <!-- Vue模板 --> <template> <div> <button @click="fatherpost">给iframe传值</button> <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"></iframe> </div> </template> <script> export default { mounted() { // 挂载在mounted中 this.iframeWin = this.$refs.iframe.contentWindow; }, methods: { fatherpost(e) { // 点击给iframe传值 this.iframeWin.postMessage("我是来自父页面的data", '*'); }, }, }; </script> ``` 2. 在iframe中给Vue传值 ```html <!-- iframe模板 --> <template> <div> <button @click="sonpost">向父亲传值</button> </div> </template> <script> export default { methods: { sonpost() { window.parent.postMessage("我是子页面的test！", '*'); }, }, }; </script> ``` 注意：在Vue项目中接收消息的代码应该写在Vue实例的生命周期函数中，例如mounted()或created()。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值