您的位置：首页 > Web前端 > JavaScript

js控制Iframe 和 iframe与主页的交互，传值 (转载)

2016-06-29 21:11 357 查看

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对象。

例子：

主页面

<title>主页面</title>

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

function showSubValue(){

//var v = window.frames[0].document.getElementById("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="sub.html" width="300" height="300"></iframe>

</body>

</html>

子页面：

<script type="text/javascript" src="css_js/jquery/jquery-1.3.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" value="显示父页面数据" onclick="showMainValue();"/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航