18

現在、XHR呼び出しからHTMLをロードするライトボックススタイルのポップアップをロードしています。element.innerHTML = contentこのコンテンツは、「これは魅力のように機能します」を使用して「モーダル」ポップアップに表示されます。

このWebサイトの別のセクションでは、Flickrの「バッジ」（http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/）を使用して、Flickrの画像を動的にロードしています。これは、flickr javascriptをロードするスクリプトタグを含めて実行されます。このスクリプトタグは、いくつかのdocument.writeステートメントを実行します。

HTMLに含めると、どちらも完全に機能します。ライトボックス内にflickrバッジコードをロードする場合にのみ、コンテンツはまったくレンダリングされません。ステートメントの記述に使用innerHTMLすることdocument.writeは、一歩踏み出しすぎているようですが、この動作のjavascript実装（FF2＆3、IE6＆7）には何の手がかりも見つかりません。

これが機能するかどうかを誰かが明確にできますか？ありがとう。

4

7 に答える 7

15

通常、innerHTML を使用する場合、script タグは実行されません。document.writeあなたの場合、呼び出しはページに既にあるすべてのものを一掃するので、これは良いことです。ただし、それでは、HTML document.write が追加するはずだったものが何もないままになります。

jQuery の HTML 操作メソッドは、HTML でスクリプトを実行します。そのトリックは、呼び出しをキャプチャdocument.writeし、適切な場所で HTML を取得することです。それが十分に単純であれば、次のようなことができます：

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

複雑になりますが。スクリプトが別のドメインにある場合、スクリプトは非同期で読み込まれるため、コンテンツを取得するには完了するまで待つ必要があります。また、簡単に選択できるラッパー要素なしで HTML をフラグメントの途中に書き込むだけの場合はどうなるでしょうか。writeCapture.js (完全開示: 私が書きました) は、これらの問題をすべて処理します。そのまま使用することをお勧めしますが、少なくともコードを見て、すべてを処理する方法を確認できます。

編集：これは、あなたが望む効果のように聞こえるものを示すページです.

于 2009-12-07T22:16:56.530 に答える
5

問題を説明する簡単なテストページを作成しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Document Write Testcase</title>
    </head>
    <body>
        <div id="container">
        </div>
        <div id="container2">
        </div>

        <script>
            // This doesn't work!
            var container = document.getElementById('container');
            container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";

            // This does!
            var container2 = document.getElementById('container2');
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.innerHTML = "alert('bar');document.write('foo');";
            container.appendChild(script);
        </script>
    </body>
</html>

このページは「bar」に警告して「foo」を出力しますが、「foo」に警告して「bar」を出力することも期待していました。ただし、残念ながら、scriptタグはより大きなHTMLページの一部であるため、上記の例のようにそのタグを選択して追加することはできません。innerHTMLできますが、コンテンツでタグをスキャンscriptし、文字列内でプレースホルダーに置き換えてから、DOMを使用して挿入する必要があります。ささいなことではないようです。

于 2008-09-10T13:25:31.743 に答える
4

document.writeln(content);の代わりに使用しdocument.write(content)ます。

ただし、より良い方法は、次のinnerHTMLように の連結を使用することです。

element.innerHTML += content;

このelement.innerHTML = content;メソッドは古いコンテンツを新しいコンテンツに置き換え、要素の innerHTML を上書きします!

一方、+=演算子 inを使用element.innerHTML += contentすると、古いコンテンツの後にテキストが追加されます。（何をするかに似てdocument.writeいます。）

于 2011-08-24T12:12:58.623 に答える
1

document.write彼らが来るのと同じくらい非推奨です。ただし、JavaScriptの素晴らしさのおかげで、提供されたコンテンツを追加するために選択した要素で使用するオブジェクトのwriteメソッドに独自の関数を割り当てることができます。documentinnerHTML

于 2008-09-10T14:03:25.193 に答える
0

問題が発生することを確認するために、最初にいくつかの説明を得ることができますか？

document.write呼び出しは、それらが発生するマークアップのポイントでマークアップにコンテンツを追加します。たとえばdocument.write、関数に呼び出しを含めても、他の場所で関数を呼び出す場合、出力は、関数が呼び出された場所ではなく、関数が定義さdocument.writeれたマークアップのポイントで発生します。

したがって、これがすべてのFlickrステートメントで機能するには、 indocument.writeの一部である必要があります。これは間違いなく当てはまりますか？contentelement.innerHTML = content

document.writeとして設定されているコンテンツに単一の単純な呼び出しを追加することで、これがまったく機能するかどうかをすばやくテストし、これinnerHTMLが何をするかを確認できます。

<script>
  var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
  element.innerHTML = content;
</script>

それがうまくいけば、要素のdocument.writeとして設定されたコンテンツで作業するという概念がうまくいくかもしれません。innerHTML

私の直感はそれが機能しないということですが、概念をテストすることはかなり簡単なはずです。

于 2008-09-10T13:13:20.727 に答える
0

では、DOMメソッドを使用して要素を作成し、scriptそれを既存の要素に追加すると、追加されたscript要素のコンテンツが実行されますか？いいですね。

スクリプトタグはより大きなHTMLページの一部であるため、特定することはできません。スクリプトタグにIDを付けてターゲットにすることはできませんか？私はおそらくここで明白な何かを見逃しています。

于 2008-09-10T13:48:57.363 に答える
0

理論的には、そうです、私はその方法でスクリプトタグを選び出すことができます。問題は、これが発生する可能性のある状況が数十あることです。そのため、この動作の原因またはドキュメントを見つけようとしています。

また、scriptタグが読み込まれた後、タグはDOMの一部ではなくなったようです。私たちの環境では、 divが空のままなので、タグcontainerをフェッチできません。scriptただし、上記の例ではスクリプトは実行されませんが、それでもDOMの一部であるため、機能するはずです。

于 2008-09-10T13:59:58.447 に答える