在iframe中调用js父页面和子页面方法

最新推荐文章于 2024-03-20 15:53:03 发布

jhhuang4836

最新推荐文章于 2024-03-20 15:53:03 发布

阅读量456

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/jhhuang4836/article/details/84509397

版权

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

在iframe中调用父页面和子页面js方法：

今天朋友问我：a页面用iframe引入b页面，而此时要在a页面怎么调用iframe所引入b页面里的方法，很熟悉，但就是忘记了，后来百度下，才晓得，主要通过window.frames["name属性"].方法名（），也就是iframe中的name属性，b页面调用a页面中的方法略过看代码吧

index.html

<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>this is index's js function");
}
</script>
</head>
<body>
<div style="background: lightblue;">
<input type="button" value="index" οnclick="ff();" />
<input type="button" value="inner" οnclick='window.frames["childPage"].ff();' />
</div>
<iframe id="" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
</body>
</html>

inner.html

<html>
<head>
<script type="text/javascript">
function ff(){
alert(">>sdfdsdfdsfdsfsdfthis is inner page's js function");
}
</script>
</head>
<body>
<div>
<input type="button" value="index" οnclick='parent.window.ff();' />
<input type="button" value="inner" οnclick="ff();" />
</div>
</body>
</html>

子页面调用父页面的JS方法：window.parent.方法名();

下面就给出一个子孙三代的调用大家可以参考：

爷爷页面：

<!DOCTYPE html>
<html>
  <head>
    <title>frameDemo.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <script type="text/javascript">
  	function father(){
  		alert("father");
  	}
  </script>
  <body>
    我是iframe主文件<p/>
    <button οnclick='window.frames["c1"].children();'>父调子</button>
    <button οnclick='window.frames["c1"].frames["c11"].sunzi();'>父调孙</button>
    <div>
    	<iframe src="iframe/1.html" name="c1"></iframe>
    </div>
  </body>
</html>

父亲页面：

<!DOCTYPE html>
<html>
  <head>
    <title>1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		function children(){
			alert("children");
		}
	</script>
  </head>
  
  <body>
    dsddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<p/>
    <button οnclick="window.parent.father();">子调父</button>
    <button οnclick='window.frames["c11"].sunzi();'>子调孙</button>
    <iframe src="2.html" name="c11"></iframe>
  </body>
</html>

孙子页面：

<!DOCTYPE html>
<html>
  <head>
    <title>2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		function sunzi(){
			alert("孙子");
		}
	</script>
  </head>
  
  <body>
    iframe2222222222222222<p/>
    <button οnclick="window.parent.children();">孙调父</button>
    <button οnclick="window.top.father();">孙调爷</button><!-- 两种方式都可以 -->
    <button οnclick="window.parent.parent.father();">孙调爷</button>
  </body>
</html>

调用兄弟节点的方法：<button οnclick='window.parent.frames["c1"].children();'>调用兄弟节点的方法</button>

其实原理是找到父页面再找兄弟页面，再找兄弟的方法。

切记：在iframe下JS方法之间和html元素之间，JS成员变量之间是相互不影响的，它和动态包含和静态包含不同。这一点要切记，iframe只是在页面形式上看上去有着包含的关系。其实如果在父页面要调用子页面的方法和元素必须用window对象。

获取元素的值：

var t=$('div',window.frames["c1"].document);//父页面取儿子页面上的属性

var m=$('div',window.frames["c1"].frames["c11"].document);//父页面取孙子页面上的属性

alert($('div',window.parent.document).text());//孙子取父页面的属性

alert($('div',window.parent.parent.document).text());//孙子取爷爷页面的属性

alert($('div',window.top.document).text());//孙子取爷爷页面的属性，爷爷是最顶级的页面

alert("兄弟节点："+$('div',window.parent.frames["c1"].document).text());//兄弟页面取出兄弟节点的属性

jhhuang4836

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在iframe中调用js父页面和子页面方法

在iframe中调用父页面和子页面js方法：今天朋友问我：a页面用iframe引入b页面，而此时要在a页面怎么调用iframe所引入b页面里的方法，很熟悉，但就是忘记了，后来百度下，才晓得，主要通过window.frames["name属性"].方法名（），也就是iframe中的name属性，b页面调用a页面中的方法略过看代码吧index.html&lt;html&gt;&lt;h...
复制链接

扫一扫

专栏目录