Js/Jquery iframe跨层操作

篇一

-------------------------------------------------------------------------------------------

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

js

在父窗口中获取iframe中的元素 

1、

格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();

实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();

2、

格式：

var obj=document.getElementByIdx_x("iframe的name").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");

ifmObj.click();

实例：

var obj=document.getElementByIdx_x("ifm").contentWindow;

var ifmObj=obj.document.getElementByIdx_x("btnOk");

ifmObj.click();

在iframe中获取父窗口的元素

格式：window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

实例：window.parent.document.getElementByIdx_x("btnOk").click();

jquery

在父窗口中获取iframe中的元素 

1、

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

2、

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素

格式：$('#父窗口中的元素ID', parent.document).click();

实例：$('#btnOk', parent.document).click();

篇二

-------------------------------------------------------------------------------------------

今天在弄jquery操作iframe中元素：先由iframe中的子页面b.html给外面的父页面a.html页面传值，再将a.html页面计算机的值放到b.html页面上，这里就用到子页面和父页面相互传值，相互调用更自函数这些功能，这里我用一个简单的例子来介绍一下这些方法。

a.html

[html] view plain copy

1. <script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
2. <script type="text/javascript">  
3. function f()  
4. {  
5.     $('#a').contents().find("#bbb").val("ddd");   
6. }  
7. function fun()  
8. {  
9.     alert('弹出子页面调用的函数');  
10. }  
11. </script>  
12. <div id="maindiv">test</div>  
13. <iframe id="a" name="a" src="b.html" width="600" height="400"></iframe><br />  
14. <input type="button" value="给子页面表单赋值" onclick="f()" />  

 

b.html

[html] view plain copy

1. <script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
2. <script type="text/javascript">  
3. function f()  
4. {  
5.     alert('开始调用父页面函数');   
6.     $(window.parent.fun());  
7.     $(window.parent.$("#maindiv").html("子页面赋过来的值"));  
8. }  
9. </script>  
10. <form name="cform"><input type="text" name="b" id="bbb" /><input name="btn" type="button" onclick="f()" value="调用父函数并给父页面元素赋值" /></form>  

篇三：js判断当前页面是否在iframe中

-------------------------------------------------------------------------------------------

1.方式一

if (self.frameElement && self.frameElement.tagName == "IFRAME") {
　　alert('在iframe中');
}

2.方式二
if (window.frames.length != parent.frames.length) {
　　alert('在iframe中');
}

3.方式三
if (self != top) { 
　　alert('在iframe中');
}

以上用任何一种都可以判断代码是否在iframe中.

篇二

-------------------------------------------------------------------------------------------

篇二

-------------------------------------------------------------------------------------------