Jquery中获取iframe的代码(window.top.document)

最新推荐文章于 2022-05-27 14:53:41 发布
最新推荐文章于 2022-05-27 14:53:41 发布
阅读量7.3k 收藏
点赞数
文章标签： iframe跨域触发事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36031730/article/details/84346419
版权 
 
//子iframe top_navigation.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>top_navigation.html</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
        <div class="displayuser">
            <div id="hide"></div>
        </div>
</body>
<script>
    $(document).ready(function(){//触发index.html中ID=div1显示隐藏事件
        $("#hide").mouseover(function(){
            $(parent.window.top.document).find("#div1").css("display","block");
        });
        $("#hide").mouseout(function(){
            $(parent.window.top.document).find("#div1").css("display","");
        });
    });
</script>
</html>

//父窗口

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <div class="content">
         <iframe src="top_navigation.html" scrolling="no" class="iframe_top" frameborder="0"></iframe>
         <iframe id="iframe_bottom" src="military_bills.html" scrolling="no" name="iframe_bottom"></iframe>
      </div>
   <div id="div1"></div>
   </body>
</html>

鼠标移动子iframe ID=hide的元素上控制父窗口中的ID=div1元素的显示与隐藏

空袭的梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
修改用window.open打开的网页标题(document.title)
d_append的博客
01-05 7438
想法：使用window.open打开一个标签页，但是发现有些标签页的title是一串长长的ip，因此想自己命名这个标签页的title。 尝试：在网上搜索到有说法说可以利用window.open的第二个参数（name），但是经过尝试发现这个参数，只是会自动跳转到已经打开且title相同的标签页，并非修改标签页的title。 解决方案： 利用window.open函数会返回打开的标签页的window来进行操作，要使用此方法需要注意，必须得是相同的域下边才能操作。 如在百度页面下， let test = wind
Jquery中获取iframe的代码
12-11
例如，如果我们想要在父窗口中选中`iframe`内的所有单选按钮，可以使用以下`jQuery`代码： ```javascript $(window.frames["iframeChild"].document).find("input[@type='radio']").attr("checked", "true"); ``` ...
js中几种实用的跨域方法原理详解
萌萌的It人 www.itmmd.com
07-15 2449
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题，我们可以使用以下几种方法： 一、通过jsonp
Jquery中获取iframe的代码(window.top.parent)
java程序员的蜕变之路
07-28 1万+
父窗口中操作iframe：window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口：window.parent.document 那么，用如果想用jquery的方法，我们怎么用jquery来获取iframe呢？下面是一下收集来的方法。 获取页面的对象其实就是dom方法外面加上jquery的选择符
jquery获取最外层（最顶部）window对象
想搞全栈的前端
07-12 2973
window.top Top属性返回当前窗口的最顶层浏览器窗口。 在不跨域的前提下，window.top就能获得最顶层的window对象，然后通过window.top.document.getElementById(…)或者window.top.(...)（window.top.(...)（window.top.(...)（window.top.即是顶层frame的jQuery实例）来查找元素了。 ...
获取父窗口iframe方法
Aa891732559的博客
05-06 173
在页面中，有个iframe，基于这个iframe，弹出了个窗口，这个窗口在关闭的时候需要操作iframe里的元素。 做法是 window.top.document.getElementById("_view_user_index_").contentWindow.document.getElementById("Score").value = $("#txt_Deductible...
js获取iframe中的window对象的实现方法
10-22
要获取`iframe`中的`window`对象，主要有以下两种方法： 1. **通过DOM元素访问：** 这种方法首先需要获取到`iframe`的DOM元素，然后通过`contentWindow`属性来访问其内部的`window`对象。例如： ```javascript ...
js与jQuery 获取父窗、子窗的iframe
12-10
window.frames["ifm"].document.getElementById("btnOk").click(); ``` 或者，如果`iframe`的ID为"ifm"，可以这样获取： ```javascript var obj = document.getElementById("ifm").contentWindow; var ifmObj ...
jquery获取iframe中的dom对象(两种方法)
10-27
在涉及到跨窗口交互时，尤其是在有 iframe 的场景下，我们需要知道如何通过 jQuery 获取并操作 iframe 中的 DOM 对象。本文将详细讲解两种方法来实现这一目标。 **方法一：通过 `window.frames` 访问 iframe 中的 ...
top.document.getElementById在模态窗口中的使用
伴老
03-18 7839
top.document.getElementById在模态窗口中的使用
通用版解决跨域问题，父页面获取iframe里面的内容
热门推荐
劲枫的博客
04-24 6万+
  父页面获取iframe里面内容的解决方案如下：   实验如下：开两个服务器，一个端口9000，一个端口9001 现在在9000页面要放一个iframe指向9001的一个页面，再在9000父页面打印9001iframe里面的东西是访问不了的，提示跨域了，端口不一样      现在的目标：父页面127.0.0.1:9000访问自己iframe src=127.0.0.1:9001...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
Truong的专栏
11-06 1280
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html 同源检测的结果： 要解决跨域的问题，我们可以使用以下几种方法： 1、
iFrame跨域解决办法
sdzhangshulong的博客
11-26 4005
按情境分 1、不跨域时 2、主域相同、子域不同时 3、主域不同 不跨域时 访问iframe：contentWindow 访问父级：parent 访问顶级：top a.html htmlxmlns="http://www.w3.org/1999/xhtml"> head>    metahttp-equiv="Content-Type"content="text/htm
浏览器兼容性问题
weixin_44751462的博客
05-24 420
javascript常见的浏览器兼容问题： document.form.item 问题 问题： 代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行 解决方法： 改用 document.formName.elements[“elementName”] 集合类对象问题 问题： 代码中许多集合类对象取用时使用()，IE能接受，FF不能 ...
通用版父页面跨域访问iframe里面的内容解决方案，jupyter+tornado跨域通信解决方案
劲枫的博客
04-24 3762
1、问题：获取jupyter里面的内容现在已经将jupyter放进iframe里面，现在的问题描述为：在父页面获取iframe里面的内容，iframe里面就是jupyter，这里的父页面是自己搭建的tornado服务器打开的页面，网址为127.0.0.1:9000，iframe里面的jupyter用的网址是127.0.0.1:8888，所以涉及到了跨域请求。1.1、通用版解决跨域问题(通用的不限于...
IFRAME跨域名的解决方法，终结版
weixin_30435261的博客
03-19 161
引用：http://www.cnblogs.com/hacker84/archive/2008/02/26/1081852.html 的改你的网页内容，等等。。。 好了，其它的废话不说了，看看下边的吧： 记得要将域名指为域名，而不是WWW或者其它的，例:shagndu8.com 而不能指向www.shangdu8.com 1、请在父网页上加上以下代码： 1&lt...
jquery 获取父窗口的元素 父窗口 子窗口
weixin_30352191的博客
06-14 131
一、获取页面元素 取父窗口的元素方法：$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document); 类似的，取其它窗口的方法大同小异 $(selector, window.top.document); $(selector, window.opener...
JavaScript中 window.parent 、window.top、window.self代表的含义
azhen5222的博客
10-29 110
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。 在项目中，有如下应用场景，原本在右侧iframe中引入对话框js类，对话框能出来但是只能在右侧iframe中移动，不能在整个页面内移动。 ...
解决window.pageYOffset，document.documentElement.scrollTop，document.body.scrollTop获取距离顶部距离都为0的问题
如需咨询可联系我，V：chen2318341674
05-27 1485
在写功能需要获取并设置距离顶部距离的时候，发现： window.pageYOffset document.documentElement.scrollTop document.body.scrollTop 以上三种情况都获取不到距离顶部距离，并且在设置的时候也无效。 解决办法： 将父元素div上的overflow-x / overflow-y值设置为visible，或者删掉。 这样就可以获取到了。 ...
jquery获取跨域iframe中内嵌iframe中的元素
最新发布
07-29
对于跨域的情况，由于浏览器的同源策略限制，直接使用 jQuery 的方法是无法获取到嵌套的跨域 iframe 中的元素的。 不过，可以通过使用 postMessage API 进行跨域通信来实现获取跨域 iframe 中的元素。以下是一个示例： 在父页面（当前页面）中： ```javascript // 监听嵌套的跨域 iframe 发送的消息 window.addEventListener('message', function(event) { if (event.origin !== 'https://example.com') { // 设置跨域 iframe 的域名 return; } // 获取嵌套的 iframe 发送过来的数据 var data = event.data; // 在此处处理接收到的数据，可以获取嵌套 iframe 中的元素 var element = $(data).find('#element'); }); // 向嵌套的跨域 iframe 发送消息 var nestedIframe = document.getElementById('nestedIframe'); // 获取嵌套 iframe 的 DOM 元素 var message = '需要获取元素'; // 发送给嵌套 iframe 的消息 nestedIframe.contentWindow.postMessage(message, 'https://example.com'); // 设置跨域 iframe 的域名 ``` 在嵌套的跨域 iframe 中： ```javascript // 监听父页面发送过来的消息 window.addEventListener('message', function(event) { if (event.origin !== 'https://parent.com') { // 设置父页面的域名 return; } // 获取父页面发送过来的数据 var data = event.data; // 在此处处理接收到的数据，可以获取嵌套 iframe 中的元素 var element = $(data).find('#element'); // 将需要获取的元素发送回父页面 event.source.postMessage(element.html(), 'https://parent.com'); // 设置父页面的域名 }); ``` 请注意，上述代码中的 `'https://example.com'` 是跨域 iframe 的域名，`'https://parent.com'` 是父页面的域名，需根据实际情况进行设置。 通过使用 postMessage API，可以实现跨域 iframe 之间的通信，并在父页面中获取到嵌套的跨域 iframe 中的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空袭的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值