今天寫的程序涉及到JS框架傳值的問題,這些是我找到的一些資料
下面主頁面和子頁面互相傳值的DEMO 如果僅僅需要子頁面觸發主頁面的函數 僅需 [ parent.window.你的函數 ] 就可以了
DOM方法:
父窗口操作IFRAME:window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 選中IFRAME中的所有輸入框: $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 選中父窗口中的所有輸入框:$(window.parent.document).find(”:text”);
iframe框架的HTML:<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
細心的朋友一下就能理解,原理其實很簡單,就是用到了$(DOM對象)轉換成jquery對象。
例子:
主頁面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主頁面</title> <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> function showSubValue(){ alert( window.frames[0].document.getElementById("zhe").value); //var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML; //alert(v); // http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html // var o = $(window.frames[0].document).find(":div#subdiv1"); // alert(o.html()); } </script> </head> <body> <div id="mainDiv">主頁面測試數據</div> <input type="button" value="查看子頁面數據" onclick="showSubValue();"/> <iframe src="zi.html" width="300" height="300"></iframe> </body> </html>
子頁面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> <title>子頁面</title> <script type="text/javascript"> function showMainValue(){ //dom方式 var v = window.parent.document.getElementById("mainDiv").innerHTML; alert(v); window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主頁面數據"; //jquery方式 // var o = $(window.parent.document).find(":div#mainDiv"); // alert(o.html()); } </script> </head> <body> <div id="subdiv1" >子頁面測試數據</div> <input type="button" id="zhe" value="顯示父頁面數據" onclick="showMainValue();"/> </body> </html>