search

Home  >  Article  >  Web Front-end  >  内嵌页面iframe以及和其兄弟iframe的相互传值_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:16:081320browse

主要知识点

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>显示图表</title><script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">    var gg="dsafdsafdsafdsafsdaf";    function ggMM() {        alert("2222222222222222222222222222222");    }    function callIframeMethod() {        //document.getElementById("ii").contentWindow.test();        $("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0]    }    function callIframeField() {        alert($("#ii")[0].contentWindow.ff);    }    function callIframeHtml() {        alert($("#ii")[0].contentWindow.$("#dd").val());        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);                    }        function giveParameter() {        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";    }</script></head><body>    <a href="#" onClick="giveParameter();">参数传递</a>    <a href="#" onClick="callIframeMethod();">调用子iframe方法</a>    <a href="#" onClick="callIframeField();">调用子iframe变量</a>    <a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>        <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>    <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe></body></html>

frame.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>显示图表</title><script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">var ff="adfdasfdsafdsafdsaf";function test() {    alert($("#dd").val());}function callMainField() {    alert(parent.gg);}function callMainMethod() {    parent.ggMM();}function callMainHtml() {    alert(parent.$("#ii").attr("id"));}function getParameter() {    alert(window.hellobaby);}</script></head><body>    <a href="#" onClick="getParameter();">接受参数</a>    <a href="#" onClick="callMainMethod();">调用子iframe方法</a>    <a href="#" onClick="callMainField();">调用主窗口变量</a>    <a href="#" onClick="callMainHtml();">调用子iframe组件</a>        <input id="dd" type="text" value="1111111111"/></body></html>

兄弟iframe页面 newIframe.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>显示图表</title><script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">function callLevelFrame() {    var ff=parent.$("#ii")[0].contentWindow.ff;    alert(ff);}</script></head><body>    <a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>        <input id="nn" type="text" value="sdafsdfsa"/></body></html>

如果是在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');


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：转义HTML字符_html/css_WEB-ITnoseNext article：TextView使用HTML标签_html/css_WEB-ITnose

Related articles

See more