当前位置: 首页 > 工具软件 > jQuery cForm > 使用案例 >

Js/Jquery iframe跨层操作

戚祺
2023-12-01

篇一

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


在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中.



篇二

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

篇二

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

 类似资料: