如何浏览器里调试iframe里层的代码？

最新推荐文章于 2022-11-24 20:38:46 发布
最新推荐文章于 2022-11-24 20:38:46 发布
阅读量2.3k 收藏 2
点赞数
文章标签： 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000009512353
版权

之前一直非常痛苦，在iframe外层根本获取不了里面的信息，后来使用了postMessage用传递消息来实现，但是用起来还是非常不方便。

其实浏览器本身是可以选择不同的iframe的执行环境的。例如有个变量是在iframe里面定义的，你只需要切换到这个iframe的执行环境，你就可以随意操作这个环境的任何变量了。

这个小技巧，对于调试非常有用，但是我直到今天才发现。

1 Chrome

这个小箭头可以让你选择不同的iframe的执行环境，可以切换到你的iframe环境里。

图片描述

2 IE

如图所示是ie11的dev tool点击下来箭头，也可以选择不同的iframe执行环境。

图片描述

3 其他浏览器

其他浏览器可以自行摸索一下。。。（G_H）

weixin_34146986
关注
使用Chrome开发人员工具调试iframe
xfxf996的博客
08-14 2431
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 8308
如何在浏览器里调试iframe里面的代码（f12） 有时网页中会内嵌一个iframe窗口，而调试iframe里面的代码就有些无从下手了，你会发现在加断点时根本找不到对应的iframe页面源代码，对iframe的js调试就无法进行，下面来介绍一下笔者自己摸索出的查找方法，来方便的查找相应的页面源代码。希望可以帮助到踩同一个坑的人~ 1.首先f12打开开发者工具，选中你要查看的iframe窗口，找到这个元素，然后查看iframe的跳转src地址，如图所示 2.然后在f12'网络'中找到这个请求地址，.
Chrome和firefox如何在iframe内部进行console调试
xzq83328的博客
11-24 891
Chrome右键查看框架源代码，获取框架地址 firefox右键 此框架，新建标签打开框架 然后在打开框架的新标签页中调试。
转：各浏览器获取iframe内容方法以及调试结果
zswfree的专栏
01-15 330
转自：http://ouyo.info/show.php?pid=1838 iframe.contentWindow.document      ->iframe.contentWindow.document.documentElement           ->iframe.contentWindow.document.documentElement.textConte...
.Net(C#) CefSharp Chrome 浏览器控件后台执行Iframe中的Js代码的方法
weixin_42098295的博客
05-30 686
之前一直使用Webbrower浏览器控件，但最近在开发一些东西时，想要在Iframe中执行js代码，但在WebBrowser中获取不到Iframe。找到了一些资料，发现CefSharp Chrome 浏览器控件挺好用，调用Iframe中Js代码也没有问题。本文主要分享一下用CefSharp后台执行Iframe中的Js的方法。 原文地址：.Net(C#) CefSharp Chrome 浏览器控件后台执行Iframe中的Js代码的方法 ...
ie的开发者工具在页面包含iframe,且src不同域时,由打开开发工具而触发的js错误提示
我的笔记
04-14 3026
ie的开发工具访问iframe资源时触发的js错误
如何调试异步加载页面里包含的js文件
12-11
div里面不是套的iframe，于是导致了一个问题，用浏览器无法调试异步加载页面里包含的js文件。简单的说就是在调试工具里面看不到异步加载页面里包含的js文件。 网上找到了一个解决办法，就是在需要调试的js文件顶部加...
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
10-27
随后，函数开始通过各种浏览器的兼容性代码来设置 iframe 的高度和宽度。如果浏览器是 IE，则根据 IE 版本（9.0、8.0 或其他版本）来决定使用 `offsetHeight`、`scrollHeight` 属性或是直接添加像素值来设定高度。在...
PHP关于IE下的iframe跨域导致session丢失问题解决方法
12-19
标题中的问题涉及到的是PHP在Internet Explorer (IE) 浏览器下，特别是在使用iframe时，出现的...在开发过程中，对于兼容性问题，尤其是浏览器的差异性，需要进行充分的测试和调试，确保在多种环境下都能正常工作。
用JS操作FRAME中的IFRAME及其内容的实现代码
10-30
通过上述方法，我们可以有效地通过在浏览器地址栏中输入JavaScript代码来操作FRAME中的IFRAME及其内容，这对于调试或自动化测试等场景非常有用。当然，这些操作也需要考虑到安全性和兼容性问题，特别是在处理不同...
IE,FF中iframe的显示问题
yeniuwangzhe的专栏
06-07 429
今天几个同事将原先在IE开发的WEB系统在FF上测试，碰到IFRAME的问题。 代码如下： HTML代码 <iframe frameBorder='0'  width="100%" height="100%" scrolling='auto' src='"+sUrl+"' >对不起，您的浏览器不支持IFRAME!iframe>   在FF中不能页面打开后没有按...
前端iframe框架在火狐、谷歌、Safari浏览器下如何快速查看页面地址src
chuangxin的专栏
04-24 4242
有个饮料企业进销存应用，采用的是每个TAB页加载一个iframe，然后用iframe加载jsp页面。在实际开发、测试中，往往需要快速定位到当前Active的TAB页对应的Iframe加载的是具体哪个页面，方便修改。以火狐、谷歌和Safari浏览器为例，简单看下如何快速查看iframe加载的页面信息。 1、火狐浏览器 鼠标右键，在此框架菜单下有很多二级菜单，比较常用的有： 1）仅显示此框架，当前页...
关于如何访问当前页面所在的iframe属性
qx5211258的专栏
12-15 982
今天碰到个问题，在当前页面访问包含他的iframe标签中的属性。用如下方法： window.frameElement如果要id就在后边加上.id  用什么加什么。其实很简单。就是知识面太少。
一键图解iframe标签属性以及使用
在写作的路上持续输出。
03-16 3641
一文了解iframe 的常用属性，保证惊讶到你。一💖
IFrame实现HTML代码调试效果
Quincylk的专栏
10-20 2520
在w3c school上学习HTML时，经常能看到提交HTML代码，右边窗口显示结果的页面。经调试相关页面，发现是用IFrame实现的。下面代码是一个简单的实现： IFrame实现HTML调试效果 function run(){ document.getElementById("iframe1").srcdoc = document.getElem
firebug在console中使用cd(window)切换到iframe窗口
fgwvip123的专栏
06-21 1874
比如，http://reg.163.com/这个网址，我们要在console中切换到loginByAccount这个iframe进行调试，应该怎么做呢？ 幸好firebug提供了cd(window)这个功能，具体查看https://getfirebug.com/wiki/index.php/Cd 具体操作如下： 首先：切换到所在iframe： cd($$("#if-lg>i
iframe调试f12
最新发布
10-11
您好，您的问题是关于iframe调试和f12的。如果您想要调试iframe，可以在浏览器中打开开发者工具（一般是按F12键），然后选择“元素”选项卡，找到iframe元素并选中它，就可以在右侧的“控制台”选项卡中进行调试了。 如果您想要在控制台中访问iframe中的内容，可以使用以下代码： ``` var iframe = document.querySelector('iframe'); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; ``` 这样就可以获取到iframe中的文档对象，然后就可以像操作普通文档对象一样操作它了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值