Question

我试图了解iframe中代码执行顺序的行为，但在FF和chrome中似乎有所不同。用例很简单：我们在顶部框架，创建管理器和窗口创建中有两个功能。窗口创建函数查找iframe并将其src属性设置为 javascript:top.writeBody(document)'其中writeBody使用document.write在框架中插入html。在其末尾插入的html包含一个带有简单日志语句的脚本标记。创建管理器功能用于跟踪执行顺序，并揭示与Chrome相比在FF / IE中处理订单的差异：

在FF中，执行流程如下：

[20:40:37.893] Entering creation manager
[20:40:37.893] Starting next job
[20:40:37.893] Invoking createWindow
[20:40:37.894] Setting src of frame
[20:40:37.895] Done setting src on frame
[20:40:37.895] Exiting jobs
[20:40:37.953]  >>> executing script in frame

在chrome中，相同的代码给出了：

Entering creation manager 
Starting next job 
Invoking createWindow 
Setting src of frame 
 >>> executing script in frame
Done setting src on frame 
Exiting jobs

基本上在chrome中，iframe中的脚本在创建管理器调用的堆栈中执行，而在FF / IE中，它在创建管理器调用完成后执行。

所以我的问题是：为什么这会有所不同，有没有办法让Chrome在这种情况下表现得像FF和IE。我有一个巨大的遗留代码库，它依赖于FF / IE的行为，而且用例并不像示例那么简单，但更多的意大利面条，所以它真的很有用！

代码示例如下。

<!DOCTYPE html>
<html>
<head>
    <title>Test scenario.</title>
    <script src="main.js"></script>
</head>
<body>
    <script>document.write("<iframe id='c1' src='about:blank'></iframe><iframe id='c2'></iframe>");</script>
</body>
</html>

和javascript

var jobs = [];
var jobn = 0;
var creationManaer = function() {
    console.log('Entering creation manager');
    if (jobs.length == 0) {
        return;
    }
    console.log('Starting next job');
    jobs[jobn]();
    console.log('Exiting jobs');
    jobn++;
    if (jobn >= jobs.length) {
        jobs.length = 0;
        jobn = 0;
    }
}

var body = "<script>" +
"console.log(' >>> executing script in frame');" +
"</script>" +
"<body></body>";

var writeBody = function(doc) {
    doc.write(body);
};

var i = 1;
var createWindow = function() {
    var frame = document.getElementById('c' + i);
    i++;
    console.log('Setting src of frame')
    frame.src = 'javascript:top.writeBody(document)';
    console.log('Done setting src on frame');
};

jobs[jobs.length] = function() {
    console.log('Invoking createWindow');
    createWindow();
}
window.onload = function() {
    creationManaer();
};

javascript设置的iframe中执行js的顺序

0 个答案: