欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

内嵌页面iframe以及和其兄弟iframe的相互传值_html/css_WEB-ITnose

程序员文章站 2022-05-13 10:54:59
...
主要知识点

1:document.getElementById("ii").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;

2:$("#ii")[0].contentWindow 如果用jquery选择器获得iframe,需要加一个【0】;

3:$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

4:$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数,在iframe页面window.hellobaby就可以获取到值,hellobaby是自定义的变量;

5:在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;

6:parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;

源码

源码包含内容,主页面(main.html)中含有两个iframe子页面(frame.html,newIframe.html)

主页面如何调用子页面中的方法;

子页面如何调用主页面中的方法;

两个子iframe之间如何如何进行交互

main.html:

显示图表参数传递    调用子iframe方法    调用子iframe变量    调用子iframe组件            

frame.htm:

显示图表接受参数    调用子iframe方法    调用主窗口变量    调用子iframe组件        

兄弟iframe页面 newIframe.htm

显示图表调用兄弟iframe        

如果是在easyui的tab的选项卡中,有个实例这么做:

//得到被选中的tab对象        var tab=parent.$("#tabs").tabs("getSelected");//该iframe是在tab选项卡中的一个内嵌的iframe,获取该页面的id为tableId的值tab.panel("body").find("iframe")[0].contentWindow.$("#tableId").val(id);//获取被选中的tab的内嵌页面iframe的id为clcs的datagrid,并重新加载数据tab.panel("body").find("iframe")[0].contentWindow.$('#clcs').datagrid('reload');