3

iframeでのコード実行順序の動作を理解しようとしていますが、FFとchromeでは異なるようです。ユースケースは単純です。トップフレームには、作成マネージャーとウィンドウ作成の2つの関数があります。ウィンドウ作成関数は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();
};
4

0 に答える 0