如何在Internet Explorer中暂停JavaScript执行？

Question

我有以下场景：

• 主页
• 嵌套页面
• 常见的JS文件（包含在两个页面中）

随后将嵌套页面加载到主页面的iframe中。 两个页面在页面加载时从公共JS文件调用函数。

现场演示：
http://www.ecmazing.com/misc/pause-execution/mainpage.html
http://www.ecmazing.com/misc/pause-execution/nestedpage.html
http://www.ecmazing.com/misc/pause-execution/common.js

常见的JS文件包含一个全局函数，它将H1元素绘制为红色。 我想在该函数的开头暂停执行，以便在H1元素仍为黑色时暂停执行。

如何在主页面上执行此操作：

这是微不足道的。 只需加载页面，打开浏览器的开发工具，选择common.js文件，并在函数的第一行设置断点。 现在， 重新加载页面。 断点将持续重新加载，执行将暂停。

如何在嵌套页面上执行此操作：

现在，在Chrome和Firefox（Firebug）中，上面设置的断点（对于主页面）也适用于嵌套页面。 两个页面都使用相同的JS文件，并且在该文件中设置断点将自动应用于这两个页面。 不幸的是，这条规则不适用于IE。

更糟糕的是，即使我随后设置了断点，然后仅重新加载iframe ，断点也不会持续存在。

所以，我不知道如何在IE中暂停执行嵌套页面。 可以吗？ （我正在通过手动设置debugger;处理这个问题debugger;在函数的开头，但我希望能够通过IE中的开发工具设置断点，如果可能的话。）

Answer 1

我能找到最接近解决方案的方法是在主页面上的loadIFrame（）函数中设置断点，然后“插入”直到加载嵌套页面的Common.js文件。 在一个更复杂的示例中，您可以在新的Common.js文件中设置断点，它们可以正常工作，直到下次加载iframe时，它们都会再次丢失。

Answer 2

我没有IE9进行测试，但也许您可以将common.js文件视为iframe页面的单独资产？ 我相信这就是它在其他浏览器中工作的原因，因为这些文件必须由浏览器标记或标记 。

一个例子是将?iframePage附加到iframe页面上的common.js的末尾。 至少在Firefox中显示一个加载为common.js?iframePage的资产。 浏览器会忽略查询字符串之后的所有内容，但JavaScript会加载该确切名称。

另一个例子是制作common.js的副本并将其重命名为commonClone.js ，然后将其用于iframe页面。

这两个示例都可能允许您在IE9中设置两次断点，每个资产一次。

也就是说，没有什么能阻止你创建iframe只有断页 ，这些断点独立于父页面正在使用的common.js文件。这个方法，我们称之为并行断点 ，允许从iframe页面开始对JavaScript进行异步调试。 父页面正在独立处理JavaScript，但可能正在协同工作。

此方法的参考来自官方源 MSDN Library： 使用F12开发人员工具调试JavaScript错误部分管理断点 ，显示如何在多个JavaScript文件上执行断点。

根据IE9开发者论坛最近的一篇论坛帖子 ，防止在用于调试时重新加载JavaScript文件的解决方案是使用内联事件处理程序而不是attachEvent ，如下例所示：

replace (or comment it out)

$(document).onload(function(){ mycustomonload functions});

with

<body onload="mycustomonload functions">

Answer 3

如果您仅为兼容性测试而这样做，那么您是否尝试过使用IETab插件进行Chrome？

这可以模拟IE的渲染引擎，同时允许您使用Chrome调试器。

如果这还不够好，那么我认为你已经陷入僵局，IE开发工具就不够复杂了。

Answer 4

也许，如果你可以重构你的Html和JavaScript代码，你只能从父页面引用common.js ，并使主页面和嵌套页面都使用相同的JavaScript函数。

这样一个断点就可以满足两种情况。

Answer 5

要在IE中调试iframe，并能够设置和保留断点，您可以在自己的选项卡/窗口中打开iframe地址。 但是，如果iframe与其父级进行通信，则这是不可能/直接的。

Answer 6

我希望你至少使用IE Debuggy Bar。 使用此代码更新您的common.js文件

function func () {
    if(typeof window.parent.debug !== "undefined"){
        window.parent.debug();
    }
    document.getElementsByTagName( 'h1')[0].style.color = 'red';
}


function debug(){
    var a = "break here";
}

将断点设为var a = "break here"; 主页加载后 当您点击Load Iframe按钮时，js将在该行停止。 使用调用堆栈导航到以前的javascript指令（行），该指令应位于nestedpage.html中的common.js文件中。 现在设置另一个断点，无论你想要什么，并在调试器中点击继续，或使用STEP功能

==更新===

顺便说一句，回答你的问题，为什么断点不能坚持在iframe中，这样想。 每次单击“加载IFrame”按钮时， window对象的旧实例将被放置在内存中，并使用新的common.js实例创建所有断点和new。 如果你要调用windows.open("http://......");也会发生同样的情况windows.open("http://......");

另外请记住，即使您在两个window(s)加载了相同的文件，它也会在浏览器中加载两个不同的执行框架。 您可以运行两个相同浏览器的浏览器实例，但它们不会在窗口中显示相同的页面。 Tho，有些东西是共享的，比如cookie，但这超出了本主题的范围。

Answer 7

您可以使用setTimeout（）暂停javascript进行特定时间...