iframe 传值

已于 2023-03-06 08:57:19 修改
阅读量411 收藏
点赞数
文章标签： webview html javascript
于 2022-03-01 09:52:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mazhipeng888/article/details/123198490
版权

父窗体：

html代码：

------------------

<iframe id="content" style="width: 100%; height: 100%;" frameborder="0" scrolling="yes" src="about:blank"></iframe>

js代码：

var $ifr = $('#content');

调用子窗体方法：

$ifr[0].contentWindow.next(); // next()为子窗体方法名字

子窗体调用父窗体直接使用js：

parent.setStep1();// setStep1()为父窗体方法名字

mazhipeng888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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 + postMessage 实现跨域通信
weixin_30604651的博客
06-28 762
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage   postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 语法： otherWindow.postMessage(mess...
多种方案教你实现iframe嵌套页面相互传参(父子通信)
tangdou369098655的博客
06-30 1万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
iframe传值方式
YhWyl527的博客
09-28 693
1
iframe父页面与子页面如何传值
王等等csdn的博客
12-07 9483
一.父页面向子页面传值 parent.vue <template> <iframe id="iframe" width="100%" :src="src"></iframe> </template> <script> export default { data() { return { iframe: null, src: '', //需要加载的子页面url
页面中iframe相互传值传参
10-29
兼容IE和火狐JS父窗口调用iframe里面的对象、函数的方法
JS实现向iframe中表单传值的方法
10-20
主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下
JS中Iframe之间传值的方法
12-07
1.在iframe子页面中获取父页面的元素：  a>window.parent.document这个是获取父页面document中的对象；  b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法； 2.在父页面中获取iframe子页面中...
javascirpt实现2个iframe之间传值的方法
10-22
主要介绍了javascirpt实现2个iframe之间传值的方法,涉及javascript针对iframe框架下的页面元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
iframe与父页面传值(方法互调)
05-29
NULL 博文链接：https://skying007.iteye.com/blog/1044069
js 实现iframe 之间传值
07-12
js 实现iframe 之间传值
Iframe标签的传值方式
m0_56260119的博客
02-16 3695
一、iframe标签的使用 <iframe style={{border:0,width:"100%",height:630,}} src={src} /> 如何进行消息通信（父发给子，子接收父的消息； 子发给父，父接收子的消息） 方法一： 直接通过获取父或者子的window来操作 （限制： 必须同域） // 父调用子的方法： this.iframe.contentWindow.iframe的属性方法 // 或 document.getElementById("myIframe.
iframe嵌套页面传值
一只想躺平却不敢躺平的小菜鸟
01-03 1万+
iframe页面嵌套传值
使用iframe的父子页面进行简单的相互传值
time141的博客
09-02 6879
使用iframe标签嵌套页面时，通过再父页面通过接口请求的数据，如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。 父页面：father.html,子页面:son.html 1、 ...
Iframe页面传值
独行侠梦的博客
05-10 1292
前言 在项目中用到了iframe划分左右窗体，这里记录一下如何传值的问题。 父窗口调用子窗口的function 其中gpsmap是子窗口的一个对象 officeContent是子iframe的id dataconfig是它的一个function $("#officeContent")[0].contentWindow. gpsmap.dataconfig(res["status"]); 子窗口调
html中嵌入iframe进行父子页面参数传递
热门推荐
以秘
07-30 3万+
实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（[参数列表]） 2.子页面调用父页面函数，window.parent.父页面的函数名（[参数列表]） 以下是测试代码： 父页面： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
layui iframe传值
hmily43的博客
10-28 2310
1.父界面向子界面传值 　　[1].父界面打开子界面： function show_layer(){ layer.open({ type: 2, area: [w+'px', h +'px'], fix: false, //不固定 maxmin: true, shadeClose: true, shade:0.4, title: title, content: url,
vue项目中有iframe，如何互相传值
qq_45316181的博客
09-02 7656
/vue 监听 iframe传过来的值。1、vue 向iframe传值。2、iframe向vue传值。
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()。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值