ホームページ >ウェブフロントエンド >htmlチュートリアル >埋め込みページ iframe とその兄弟 iframe_html/css_WEB-ITnose との相互値転送
埋め込みページ iframe とその兄弟 iframe_html/css_WEB-ITnose との相互値転送
- WBOYオリジナル
- 2016-06-21 09:16:081358ブラウズ
主な知識ポイント
1: document.getElementById("ii").contentWindow iframe オブジェクトを取得した後、contentWindow を通じてページを含む iframe の window オブジェクトを取得し、ページ要素にアクセスできます。通常;
2: $("#ii")[0].contentWindow jquery セレクターを使用して iframe を取得する場合は、[0]; を追加する必要があります。 0].contentWindow.$(" #dd").val() iframe のウィンドウ オブジェクトを取得した後、jquery セレクターを使用してページ操作を実行できます
4: $("#ii")[0] .contentWindow.hellobaby="dsafdsafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; はい この方法で iframe ページにパラメータを渡すと、iframe ページの window.hellobaby の値を取得できます。
5: iframe ページの親を介してメイン ページのウィンドウにアクセスすると、正常に動作します。
6:parent.$("#ii")[0].contentWindow.ff; を呼び出すと、同じレベルの iframe ページ間では、最初に父親のウィンドウを取得してから、同じレベルの iframe を呼び出す必要があります。
ソース コード
ソース コードにはコンテンツが含まれています。 (main.html) には 2 つの iframe サブページ (frame.html、newIframe.html) が含まれています
メイン ページのサブページのメソッドを呼び出す方法 ;サブページがメイン ページのメソッドを呼び出す方法;
方法2 つのサブ 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> Brother 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对象 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');
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。