js/jquery父元素调用子元素方法失效

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js/jquery父元素调用子元素方法失效相关的知识，希望对你有一定的参考价值。

失效代码：

$("#content_918").find('iframe')[0].contentWindow.showCusInfo(callNumber,callId,direction,deptId);

现在用jquery写的，本地IE11和chrome都能用，打包到服务器上失效了，content_918是个div的id，div里面放了iframe，iframe里面的jsp有js方法showCusInfo，哪位高手帮个忙给点思路，谢谢了。

跨域了 不用想了 采纳吧！ 跨域就是 你在新浪里面用js不可以调用百度的网站里面的js追问

可我的是自己网站调自己网站的，只是使用了iframe引用啊

追答

contentWindow
这个应该有兼容性问题 http://bbs.csdn.net/topics/360064743 查查这个

追问

单独 alert(document.getElementById("content_918").contentWindow); 显示object 一直都在IE下 还是和兼容性有关吗

追答

document.getElementById("content_918").contentWindow看看里面的元素就知道是否已经成功获取了！

追问

不成功

追答

里面有元素？ innerhtml 和innerText 都没有？

 参考技术A 一个页面的js不可以访问其他域名下的js的，
你那个iframe就是。
就是楼上说的跨域。
两个页面的域名不同的话
$("#content_918").find('iframe')[0]. 后面的禁止访问

在本地调试一般可以，浏览器允许
在服务器肯定禁止的，不安全

你试试把iframe去掉，换成div什么的，然后把那个网页的内容弄过来一起显示追问

感谢二位让我了解到跨域！我的原因：我的界面动态打开，代码：loadUrl('content_918',url,'**工作台');$("#content_918").find('iframe'[0].contentWindow.showCusInfo(callNumber,callId,direction,deptId);url写死打包以后没获取导致页面加载，找不到showCusInfo方法。

jqueryjs调用iframe父窗口与子窗口元素的方法整理

1. jquery 在iframe子页面获取父页面元素代码如下:

$("#objid", parent.document)

2. jquery在父页面 获取iframe子页面的元素

代码如下:

$("#objid",document.frames(‘iframename‘).document)

3.js 在iframe子页面获取父页面元素代码如下:

indow.parent.document.getElementByIdx_x("元素id");

4.js 在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

5.子类iframe内调用父类函数：

window.parent.func();

 

 

用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下：

1、父页面（demo.html），在父页面修改子页面div的背景色为灰色，原来为红色：

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>demo主页面</title>  
  6.     <script type="text/javascript">  
  7.     window.onload = function(){  
  8.         var _iframe = document.getElementById(‘iframeId‘).contentWindow;  
  9.         var _div =_iframe.document.getElementById(‘objId‘);  
  10.         _div.style.backgroundColor = ‘#ccc‘;  
  11.     }  
  12.       
  13.     </script>  
  14. </head>  
  15.   
  16. <body>  
  17.   
  18. <div id=‘parDiv‘>父页面</div>  
  19. <iframe src="demo-iframe.html" id="iframeId" height="150" width="150"></iframe>    
  20. </body>  
  21. </html>  


2、子页面（demo-iframe.html），在子页面修改父页面div的字体颜色为红色，原来为黑色：

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>子页面demo13-iframe.html</title>  
  6.     <script type="text/javascript">  
  7.     window.onload = function(){  
  8.         var _iframe = window.parent;  
  9.         var _div =_iframe.document.getElementById(‘parDiv‘);  
  10.         _div.style.color = ‘red‘;  
  11.     }  
  12.     </script>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div id=‘objId‘ style=‘width:100px;height:100px;background-color:red;‘>子页面</div>  
  17. </body>  
  18. </html>  


3、效果图：

（1）没有加入js时的效果图：

技术分享

（2）加入js后的效果图：

技术分享




以上是关于js/jquery父元素调用子元素方法失效的主要内容，如果未能解决你的问题，请参考以下文章

jqueryjs调用iframe父窗口与子窗口元素的方法整理

js/jquery如何获取获取父窗口的父窗口的元素

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

iframe每个页面加载css js

js 找到子元素的父元素

js和jquery获取父级元素子级元素兄弟元素的方法