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

在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());//兄弟页面取出兄弟节点的属性

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用以下方法来判断是否在 iframe : ```javascript if (window.self !== window.top) { // 在 iframe } else { // 不在 iframe } ``` 在 jQuery ,可以使用 `parent` 方法调用 iframe 页面的元素和方法: ```javascript // 获取页面的元素 $(parent.document).find('#elementId'); // 调用页面方法 parent.methodName(); ``` ### 回答2: 要判断当前页面是否在iframe,可以使用JavaScript的window对象的top属性来判断。如果top属性等于自身window对象,那么证明当前页面不在任何iframe;如果top属性不等于自身window对象,那么证明当前页面在一个iframe。 示例代码如下: ```javascript if (window.top === window){ console.log("当前页面不在任何iframe"); } else { console.log("当前页面在一个iframe"); } ``` 要在iframe调用页面的元素和方法,可以使用jQuery的parent()方法或者window.parent来获取页面的元素或窗口对象,然后通过对象的方法来进行操作。 示例代码如下: ```javascript // 使用parent()方法获取页面元素并进行操作 $("button", parent.document).click(function(){ // 在页面查找<button>元素,并添加点击事件处理函数 alert("在页面点击了按钮"); }); // 使用window.parent获取页面窗口对象并进行操作 window.parent.postMessage("Hello from iframe", "*"); // 向页面发送跨域消息 ``` 注意:在跨域的情况下,使用postMessage方法页面发送消息时,需要指定目标窗口的origin,以保证安全性。 ### 回答3: 在JS,可以通过window对象的top属性判断当前页面是否在iframe。若top属性等于当前window对象本身,则表示当前页面不在任何iframe;若top属性指向其他window对象,则表示当前页面在一个iframe。 以下是通过JS代码判断是否在iframe的示例: ```javascript if (window.top === window.self) { console.log("当前页面不在iframe"); } else { console.log("当前页面iframe"); } ``` 当需要在iframe页面调用页面的元素或方法时,可以使用jQuery来实现。jQuery可以通过使用窗口对象的parent属性来访问页面的元素或方法。 以下是通过jQuery调用页面的元素或方法的示例: ```javascript // 在iframe调用页面的元素 var parentElement = $(parent.document).find("#elementId"); // 在iframe调用页面方法 parent.myFunction(); ``` 在以上示例,通过$(parent.document)来选择页面的DOM元素,再通过find()方法选择特定的元素。若需要调用页面方法,则使用parent对象直接调用方法即可。通过这种方式,可以在iframe页面进行交互。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值