[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值

今天写的程序涉及到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>

巴特西

[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值

最新文章

热门文章