2009-04-01 5 views
6

次のマークアップがあるとします。IE 8のページにjavascriptを挿入するにはどうすればよいですか?

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

とマークアップとJavaScriptを含むjsVarという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> 
しかし、IE8では次のようになります。

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

IE 8でJavaScriptを挿入する方法はありますか?

私はMooToolsコードの代わりに

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

を使ってLuca Matteisの提案を試みました。同じ結果が得られました。これはMooToolsの問題ではありません。

答えて

1

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

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

+0

私はそれを試しました。私は同じ結果を得る。しかし、これはmootoolsの問題ではないことを証明します。 – adolfojp

1

スクリプトタグの内容を評価する必要がある場合があります。これはあなたのjsVarとeval(whatsBetweenTheScriptTags)でスクリプトを見つけるために解析する必要があります。

+0

それは私が従わなければならない道です。私は現在、evalを使用しています。または、マスタープレースホルダ要素のスクリプト要素の内容について一時的な関数を実行しています。 IE 8はスクリプトをマークアップに挿入しないので、変数レベルで解析する必要があります。それは動作します。 – adolfojp

5

このMSDN postは、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注入されたスクリプトローディングタグの使用を検討することを望むかもしれません。私はこれが不可能かもしれないと理解していますが、検討する価値があります。

+1

http://forums.microsoft.com/msdn/showpost.aspx?postid=909379&siteid=1 IEのスクリプトはNoScope要素です。そして、NoScope要素は、innerHTMLまたはinsertAdjacentHTMLを挿入する前に、解析されたHTMLの先頭から削除されます。セキュリティ上の問題とはみなされません。 –

1

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

コンテンツを保存したまま<script>タグをすべてスワップするだけで、string.replace()を使用してください。<textarea class="myScript" style="display:none">結果をdivのinnerHTMLに貼り付けます。

これが完了すると、あなたは、すべてのテキストエリアを取得するために

div.getElementsByTagName("textarea") 

を使用し、それらをループして、マーカーのクラス(この場合は"myScript")を探し、そしてeval(textarea.value)または(new Function(textarea.value))()あなたが気にするもののいずれかのことができます約。私はそれを試したことがない

1

、それだけで私の心に来た...あなたは次のことを試してみてください。

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); 

あなたはHTMLマークアップを挿入するために、同じ技術(DOM)を使用することができます。

4

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

  • (orphan.getElementsByTagName)スクリプトタグのための孤児ノードを検索
  • 孤児DOM要素にHTMLを追加する(後のために保存)、これらのスクリプトノードからコードを取得し、そしてその後、(スクリプト要素を作成し、そこに格納されたコードを追加孤立
  • からscriptElemを
  • (placeholder.innerHTML = orphan.innerHTML)孤児にされたHTML残りを追加して、プレースホルダに追加し、それらを削除します.text = 'アラート( "私のコード");')
  • はその後、DOM(好ましくヘッド)にscript要素を追加し、その後、あなたはそれそれらの他のブラウザで「作品」と言うとき、あなたはalertポップアップメッセージが表示されます意味ですか
 
function set_html(id, html) { 
    // create orphan element set HTML to 
    var orphNode = document.createElement('div'); 
    orphNode.innerHTML = html; 

    // get the script nodes, add them into an arrary, and remove them from orphan node 
    var scriptNodes = orphNode.getElementsByTagName('script'); 
    var scripts = []; 
    while(scriptNodes.length) { 
     // push into script array 
     var node = scriptNodes[0]; 
     scripts.push(node.text); 

     // then remove it 
     node.parentNode.removeChild(node); 
    } 

    // add html to place holder element (note: we are adding the html before we execute the scripts) 
    document.getElementById(id).innerHTML = orphNode.innerHTML; 

    // execute stored scripts 
    var head = document.getElementsByTagName('head')[0]; 
    while(scripts.length) { 
     // create script node 
     var scriptNode = document.createElement('script'); 
     scriptNode.type = 'text/javascript'; 
     scriptNode.text = scripts.shift(); // add the code to the script node 
     head.appendChild(scriptNode); // add it to the page 
     head.removeChild(scriptNode); // then remove it 
    } 
} 

set_html('ph', 'this is my html. alert("alert");'); 
0

それを削除または、あなたは単に<script>タグがDOMツリーにそれを作ることを意味しますか?

あなたの目標が前者の場合、埋め込まれたhtmlを挿入する動作は、ブラウザに非常に依存しています。

$(element).set('html', '<strong>Foo</strong><script>alert(3)</script>') 
を、私は はないIE(7)ではなく、FFで(3)(ただし、私はを行う <script>ノードを取得するには、ポップアップを得ることはありません。たとえば、最新のMooToolsの中で私が試すことができますDOMに正常に挿入されます)。すべてのブラウザでalertになるには、this answerとする必要があります。

1

申し訳ありませんが、おそらく私はここに何かを見逃しています - これは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" 
}); 

限り「その他」の内容は懸念しているとして、我々はすべての繰り返し車輪の再発明する必要がありますする枠組みないを使用している理由の一つ...

ないですあなたはどうやってそれを手に入れますか?Requestクラスを通じて場合、それはオプションを使用して、あなたはうまくやりたいことができます:私は(IE8(およびIE7) 私は動的にスクリプトを挿入できる唯一の方法と同じ問題に遭遇した

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

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); 

あなたが注入したいインラインコードを持っている場合は、タイマーをドロップし、script要素のための「テキスト」メソッドを使用することができます。

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

私の答えはかなり遅く来たと知っています。しかし、決して遅くないほど良いことはありません:-)

0

私のコメントは本当に遅いですが、<script>の内容が表示されない理由は、defer属性を追加しなかったためです<script>タグに送信します。 MSDNの記事では、具体的には、<script>タグを実行するために必要なことを述べています。

関連する問題