iframe传值到子页面（iframe 父页面调用子页面方法）
本文目录
- iframe 父页面调用子页面方法
- iframe 父子页面通讯
- 关于JSP中父页面和子页面的数据交互问题
- iframe 怎么根据id传值
- iframe传值
- layer.open Iframe弹窗 除了地址栏传参，怎么给子页面传递参数
iframe 父页面调用子页面方法
iframe 父页面调用子页面方法：
parent.frames.window.functionName();
frameName:IFrame的ID;
funtionName:子页面中JS方法名;
var obj = parent.frames.window;
在父页面访问子页面中某个控件如:obj.document.getElementByIdx_x(’clientID’)
子页面刷新父页面:top.window.location.replace(Url);
iframe 父子页面通讯
***隐藏网址***
《p》你的浏览器不支持 iframe。《/p》
《/iframe》
// 父发
var iframeWindow = document.getElementById(’iframe’).contentWindow;
***隐藏网址***
// 子收
window.addEventListener("message", function(event) {
console.log(’接收到了’, event)
}, false);
// 子发
window.parent.postMessage(’传递给父页面的数据’,’*’);
// 父收
window.addEventListener(’message’,function(event){
console.log(’接收到了’,event)
})
关于JSP中父页面和子页面的数据交互问题
jsp中父子页面交互传值方式介绍：
两个JSP页面，父页面需要子页面的内容，但子页面是隐藏的，具体来说，子页面是一系列的模板，父页面要通过id来获取这些模板，不愿意通过《include》方式导入，因为如果模板过多，就导致整个父页面太大，加载缓慢，以下两个方案：
1、通过ajax方式
实现过程:通过ajax请求到子页面中,子页面获取参数id使用java和js变量的交互后,返回需要的模板信息
缺点：把js变量转换成java变量比较麻烦,需要使用form表单来提交,而且jsp中的java脚本是在服务器端运行的,需要服务器端资源开销,而且增加了交互次数
2、通过iframe 引入
实现过程:使用iframe引入子页面,然后通过$(iframe.contents().find("#"+id)).val()获得需要的模板。
缺点:不确定iframe是不是可以延迟加载,如果也想《include》一样把整个页面都导入进来，这样交互方便了。
iframe 怎么根据id传值
可以在点击的时候把这行数据传值到iframe里面去，可以父页面调用子页面方法 iframe的id.window.子页面js方法（）。
iframe传值
1、src传值
父页面：
《iframe id="video1" width="100%" height="100%" src="/static/jsmpeg-master/view-stream.html?url=live1" frameborder="0"》《/iframe》
子页面：
window.onload = function () {
let url = ’ws://172.18.8.51:8082/’ + location.href.split(’=’) // ws://172.18.8.51:8082/live1
}
2、postMessage
父页面：
window.onload=function(){
document.getElementById(’iframe’).contentWindow.postMessage(’要传的值’, ’*’)
}
*表示无限制，也可以是一个url
子页面：
window.addEventListener(’message’, function (e) {
console.log(e.data) // e.data即为父页面中’要传的值’
}, false)
layer.open Iframe弹窗 除了地址栏传参，怎么给子页面传递参数
iframe弹窗访问父页面API典型例
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
类似弹窗html通语句获取父页面某容器值：
parent.$(’#父页面元素id’).val();
所需弹窗open前（父页面html代码）先值放容器（比input）弹窗html代码用述script获取值并输容器放隐藏modal面访问者完全见
更多文章：
2026年10月11日 20:20
2026年10月11日 20:10
gcc编译器参数（深度linux的arm-linux-gnueabihf-gcc编译参数如何配）
2026年10月11日 19:30
2026年10月11日 17:23
asp是什么检查项目（医院血液检验项目RPR、TPPA、HIV-Ab各是什么意思）
2026年10月11日 10:20
汇编输出指令（用汇编语言循环指令在屏幕中间输出红底白字的“hello I am 720“）
2026年10月11日 07:20
本地搭建springboot项目（使用eclipse构建springboot项目）
2026年10月11日 06:20
2026年10月11日 03:50
java入门神器好用吗（java 7入门经典适合初学者自学用吗）
2026年10月11日 02:40
unix文件系统采用（Unix采用树形文件系统，其中“树形文件系统”什么意思）
2026年10月11日 00:50
