javascript - IE 8 のページに JavaScript を挿入するにはどうすればよいですか?

Question

次のマークアップがあるとします。

<div id="placeHolder"></div>

jsVarいくつかのマークアップといくつかの JavaScript を含むJavaScript 変数があります。

Mootools 1.1 を使用すると、次のように JavaScript コンテンツをプレースホルダーに挿入できます。

$('placeHolder').setHTML(jsVar);

これは Firefox、Opera、さらには Safari でも機能し、結果のマークアップは次のようになります。

<div id="placeHolder">
    <strong>I was injected</strong>
    <script type="text/javascript">
        alert("I was injected too!");
    </script>
</div>

ただし、IE 8では次のようになります。

<div id="placeHolder">
    <strong>I was injected</strong>
</div>

IE 8 に JavaScript を挿入する方法はありますか、それともセキュリティモデルによってこれを行うことはまったく禁止されていますか?

Luca Matteisの使用の提案を試しました

document.getElementById("placeHolder").innerHTML = jsVar;

MooTools コードの代わりに、同じ結果が得られます。これは MooTools の問題ではありません。

score 5 · Accepted Answer

このMSDNの投稿では、innerHTMLを使用してJavaScriptをページに挿入する方法について具体的に説明しています。正解です。IEはこれをセキュリティの問題と見なしているため、スクリプトを挿入するには特定のフープを飛び越える必要があります...おそらくハッカーはこのMSDNの投稿を私たちと同じように読むことができるので、私は途方に暮れています。なぜMSはこの間接参照の余分な層を「安全」と見なしますが、私は逸脱します。

MSDNの記事から：

<HTML>
<SCRIPT>
function insertScript(){
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT DEFER>";
    sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    ScriptDiv.innerHTML = sHTML + sScript;
}    
</SCRIPT>
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

可能であれば、document.write挿入されたスクリプト読み込みタグを使用してセキュリティを強化し、ブラウザ間の非互換性を減らすことを検討してください。これは不可能かもしれませんが、検討する価値はあります。

score 4 · Accepted Answer

これは、IE で動作させるために、約 1 年前に私たちのサイトで行った方法です。手順は次のとおりです。

HTML を孤立した DOM 要素に追加する
孤立したノードでスクリプトタグを検索します (orphan.getElementsByTagName)
それらのスクリプトノードからコードを取得し (後で保存します)、孤立したノードからそれらを削除します。
孤立したHTMLの残り物を追加し、プレースホルダーに追加します（placeholder.innerHTML = orphan.innerHTML）
スクリプト要素を作成し、保存されたコードを追加します (scriptElem.text = 'alert("my code");')
次に、script 要素を DOM (できれば head) に追加してから、それを削除します。

関数 set_html( id, html ) {
    // 孤立した要素を作成し、HTML を次のように設定します
    var orphNode = document.createElement('div');
    orphNode.innerHTML = html;

    // スクリプト ノードを取得し、それらを配列に追加し、孤立ノードから削除します
    var scriptNodes = orphNode.getElementsByTagName('script');
    var スクリプト = [];
    while(scriptNodes.length) {
        // スクリプト配列にプッシュ
        var ノード = scriptNodes[0];
        scripts.push(node.text);

        // その後、削除します
        node.parentNode.removeChild(ノード);
    }

    // html をプレースホルダー要素に追加します (注: スクリプトを実行する前に html を追加しています)
    document.getElementById(id).innerHTML = orphNode.innerHTML;

    // 保存されたスクリプトを実行
    var head = document.getElementsByTagName('head')[0];
    while(scripts.length) {
        // スクリプト ノードを作成します
        var scriptNode = document.createElement('script');
        scriptNode.type = 'text/javascript';
        scriptNode.text = scripts.shift(); // コードをスクリプト ノードに追加します
        head.appendChild(scriptNode); // ページに追加
        head.removeChild(scriptNode); // その後、削除します
    }   
}

set_html('ph', 'これは私の html です。alert("alert");');

score 2 · Accepted Answer

IE8 (および IE7) で同じ問題が発生しました。(src を使用して) スクリプトを動的に挿入できる唯一の方法は、タイマーを使用することです。

source = "bla.js";

setTimeout(function () {
            // run main code
            var s = document.createElement('script');
            s.setAttribute('src', source);
            document.getElementsByTagName('body')[0].appendChild(s);
        }, 50);

挿入したいインラインコードがある場合は、タイマーを削除して、スクリプト要素に「テキスト」メソッドを使用できます。

s.text = "alert('hello world');";

私の答えがかなり遅れていることはわかっています。ただし、遅刻しないよりはましです :-)

score 1 · Accepted Answer

IE はデフォルトでコンテンツの挿入を拒否するため、自分で実行する必要がありますが、少なくとも IE をだまして解析を行わせることができます。

を使用してすべてのタグをstring.replace()に交換し、コンテンツを保持します。次に、結果をdiv のに貼り付けます。<script><textarea class="myScript" style="display:none">innerHTML

これが完了したら、使用できます

div.getElementsByTagName("textarea")

"myScript"すべてのテキストエリアを取得するには、それらをループして、マーカークラス (この場合) と、関心のあるいずれかeval(textarea.value)またはいずれかを探します(new Function(textarea.value))()。

score 1 · Accepted Answer

私はそれを試したことはありません。ただ頭に浮かんだだけです...次のことを試してみてください:

var script = document.createElement('script');
script.type = 'text/javascript';

script.innerHTML = '//javascript code here'; // not sure if it works
// OR
script.innerText = '//javascript code here'; // not sure if it works
// OR
script.src = 'my_javascript_file.js';

document.getElementById('placeholder').appendChild(script);

同じ手法 (DOM) を使用して、HTML マークアップを挿入できます。

score 1 · Accepted Answer

申し訳ありませんが、ここで何かが足りないかもしれませんが、これは mootools 1.11 の質問なので、assets.js を使用しないのはなぜですか?

// you can  also add a json argument with events, etc.
new Asset.javascript("path-to-script.js", { 
    onload: function() { 
        callFuncFromScript(); 
    }, 
    id: "myscript"
});

フレームワークを使用している理由の 1 つは、車輪を最初からやり直さなくても済むようにするためではないでしょうか...

「他の」コンテンツに関する限り、どうやってそれを手に入れますか? Request クラスを使用すると、オプションを使用して適切に実行できます。

{
    update: $("targetId"),
    evalScripts: true,
    evalResponse: false
}

score 1 · Accepted Answer

MooTools についてはわかりませんが、 innerHTML は試しましたか?

document.getElementById("placeHolder").innerHTML = jsVar;

score 0 · Accepted Answer

私のコメントは本当に遅れていますが、ここで最も正確なものでもあります.コンテンツが実行されていないのは、属性をタグに<script>追加していないためです. MSDN の記事では、タグを実行するにはそれを行う必要があると具体的に述べています。defer<script><script>

javascript - IE 8 のページに JavaScript を挿入するにはどうすればよいですか?

10 に答える 10

Related

Reference