转：各浏览器获取iframe内容方法以及调试结果

最新推荐文章于 2025-01-12 20:17:52 发布
最新推荐文章于 2025-01-12 20:17:52 发布
阅读量389 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： web 文章标签： iframe 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zswfree/article/details/84128844
本文介绍了在不同浏览器中通过JavaScript访问iframe内文档内容的方法。包括使用textContent、innerText及XMLDocument等属性来获取内容，并对比了IE6至IE9、Gecko、WebKit等浏览器内核的支持情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转自：http://ouyo.info/show.php?pid=1838

iframe.contentWindow.document

     ->iframe.contentWindow.document.documentElement

          ->iframe.contentWindow.document.documentElement.textContent  (W3)

          ->iframe.contentWindow.document.documentElement.innerText   (IE)

     ->iframe.contentWindow.document.XMLDocument

          ->iframe.contentWindow.document.XMLDocument.text

 

 

 

 

contentWindow.document

>.documentElement

>>.textContent

>>.innerText

>.XMLDocument

>>.text

Trident

 

 

 

 

 

 

 

 

 

ie6

 

[object]

[object]

undefined

content

[object]

content

 

ie7

 

 

 

 

 

 

 

 

 

maxthon

[object]

[object]

undefined

content

[object]

content

 

 

360se

[object]

[object]

undefined

content

[object]

bug

 

 

原生

 

 

 

 

 

 

 

ie8

 

[object HTMLDocument]

[object HTMLHtmlElement]

undefined

content

[object]

content

 

ie9

 

[object Document]

[object Element]

content

undefined

undefined

×

gecko

 

 

[object XMLDocument]

[object Element]

content

undefined

undefined

×

webkit

 

 

 [object Document]

[object Element]

content

undefined

undefined

×

presto

 

 

[object XMLDocument]

[object Element]

content

undefined

undefined

×

 

 

 

 

 

 

 

 

 

IFrame实现HTML代码调试效果
Quincylk的专栏
10-20 2572
在w3c school上学习HTML时，经常能看到提交HTML代码，右边窗口显示结果的页面。经调试相关页面，发现是用IFrame实现的。下面代码是一个简单的实现： IFrame实现HTML调试效果 function run(){ document.getElementById("iframe1").srcdoc = document.getElem
使用Chrome开发人员工具调试iframe
xfxf996的博客
08-14 2786
I'd like to use the Chrome developer console to look at variables and DOM elements in my app, but t
如何在浏览器里调试iframe里面的代码（f12）
hunt_er的博客
07-20 9364
如何在浏览器里调试iframe里面的代码（f12） 有时网页中会内嵌一个iframe窗口，而调试iframe里面的代码就有些无从下手了，你会发现在加断点时根本找不到对应的iframe页面源代码，对iframe的js调试就无法进行，下面来介绍一下笔者自己摸索出的查找方法，来方便的查找相应的页面源代码。希望可以帮助到踩同一个坑的人~ 1.首先f12打开开发者工具，选中你要查看的iframe窗口，找到这个元素，然后查看iframe的跳转src地址，如图所示 2.然后在f12'网络'中找到这个请求地址，.
先判断浏览器类型再调用不同iFrame的使用心得
k745933923的专栏
08-02 676
iFrame的使用心得
如何浏览器里调试iframe里层的代码？
weixin_34146986的博客
05-22 2497
之前一直非常痛苦，在iframe外层根本获取不了里面的信息，后来使用了postMessage用传递消息来实现，但是用起来还是非常不方便。 其实浏览器本身是可以选择不同的iframe的执行环境的。例如有个变量是在iframe里面定义的，你只需要切换到这个iframe的执行环境，你就可以随意操作这个环境的任何变量了。 这个小技巧，对于调试非常...
跨浏览器获取iframe内文件下载控件值
"这篇文章主要探讨了如何在JavaScript中从父页面获取iframe内控件的值，特别是针对Internet Explorer（IE）和Firefox这两种浏览器的兼容性问题。提供的代码示例展示了如何触发iframe中的按钮点击事件，并获取iframe...
兼容IE与FF的JavaScript获取IFrame内容方法
- “源码”在这里很可能是指示例JavaScript代码，该代码演示了如何兼容不同浏览器获取iframe内容。 - “工具”可能是指开发者可以使用的调试工具或者插件，以便在开发过程中更容易地测试和调试iframe内容的访问。 ...
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
10-27
以上即为文章中介绍的 JavaScript 实现 iframe 高度自适应的核心内容，它涉及了用户代理（UserAgent）的检测、不同浏览器环境下的 DOM 访问差异以及一些常见的浏览器兼容性问题解决方法。通过这种方法，可以确保在...
PHP关于IE下的iframe跨域导致session丢失问题解决方法
12-19
标题中的问题涉及到的是PHP在Internet Explorer (IE) 浏览器下，特别是在使用iframe时，出现的...在开发过程中，对于兼容性问题，尤其是浏览器的差异性，需要进行充分的测试和调试，确保在多种环境下都能正常工作。
跨域文件上传：form+iframe实现方法
4. 为了处理服务器返回的结果，可以通过JavaScript访问`<iframe>`的`contentDocument`或`contentWindow`属性，获取其中的响应内容。但由于同源策略的限制，只能在同一个域下的页面中访问`<iframe>`，因此，服务器端...
前端iframe框架在火狐、谷歌、Safari浏览器下如何快速查看页面地址src
chuangxin的专栏
04-24 4508
有个饮料企业进销存应用，采用的是每个TAB页加载一个iframe，然后用iframe加载jsp页面。在实际开发、测试中，往往需要快速定位到当前Active的TAB页对应的Iframe加载的是具体哪个页面，方便修改。以火狐、谷歌和Safari浏览器为例，简单看下如何快速查看iframe加载的页面信息。 1、火狐浏览器 鼠标右键，在此框架菜单下有很多二级菜单，比较常用的有： 1）仅显示此框架，当前页...
Chrome和firefox如何在iframe内部进行console调试
xzq83328的博客
11-24 1124
Chrome右键查看框架源代码，获取框架地址 firefox右键 此框架，新建标签打开框架 然后在打开框架的新标签页中调试。
ie的开发者工具在页面包含iframe,且src不同域时,由打开开发工具而触发的js错误提示
我的笔记
04-14 3064
ie的开发工具访问iframe资源时触发的js错误
IE,FF中iframe的显示问题
yeniuwangzhe的专栏
06-07 452
今天几个同事将原先在IE开发的WEB系统在FF上测试，碰到IFRAME的问题。 代码如下： HTML代码 &lt;iframe frameBorder='0'  width="100%" height="100%" scrolling='auto' src='"+sUrl+"' &gt;对不起，您的浏览器不支持IFRAME!iframe&gt;   在FF中不能页面打开后没有按...
【Web前端】探索HTML中的“iframe”标签
一条晒干的咸鱼的博客
08-18 4997
现代网页开发中，​​​​ 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 ​​iframe​​ 标签，包括设置高度和宽度、移除边框，以及如何用 ​​iframe​​​ 来显示目标链接页面。
深入浅出iframe（+ iframe嵌套第三方页面跨域带cookie问题）
热门推荐
qq_45859670的博客
08-30 1万+
iframe标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。由于iframe可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
什么是 iframe？它在网页中的应用与实现
最新发布
weixin_63726940的博客
01-12 3326
iframe是一个功能强大的 HTML 元素，允许我们在页面中嵌入外部网页内容、媒体文件、广告等。它的隔离性和便捷性使得网页开发更加灵活，但也需要注意跨域问题、SEO 影响和性能优化等挑战。通过合理使用iframe，可以有效提升网页的交互性和内容展示效果。
【华为云技术分享】详解浏览器跨域的几种方法
华为云官方博客
07-13 4406
本文针对浏览器的跨域特性，做一下深入介绍，以便我们在进行WEB前端开发和测试时，对浏览器跨域特性有全面的理解和掌握。
浏览器查找iframe
weixin_41716656的博客
11-21 296
按f12调出开发者工具，elements，ctrl F 搜索iframe，网页上选择想要查看的部分，左侧iframe里的src。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值