2016-08-14 3 views
0

基本的に私は他の誰かのページでホストする必要がある外部JSファイルを持っています。このJSファイルは、document.writeを使用してページにHTMLを書き込みます。document.writeを使用する方法はありますか?本体の上部に書き込む方法はありますか?

今のところ、JSファイルが含まれていた場所にHTMLが埋め込まれていますが、<body>の直後にHTMLをページの上部に書きたいとします。

どうすればよいですか? JSファイルを埋め込んでいる人はbodyタグの直後に置くことはできないと考えてください。

+0

未テスト理論が、どのような場合は、ドキュメントを再宣言します。書き込み、コンテナ要素を作成し、必要な場所に挿入し、innerHTMLを使用してその内部に引数文字列を書き込みますか?あるいは、柔軟性のない挿入方法をブロックしないように第三者に知らせるようにしてください; – jedifans

+1

'document.write'を使わないでください。 – Oriol

+0

@Oriolなぜですか? – kevinkt

答えて

2

可能であれば、avoid using document.write。ここでは、それが実行されますように、スクリプトを挿入する一般的な方法は次のとおりです。

document.addEventListener('DOMContentLoaded', function(){ 
    var s = document.createElement('script'); 
    s.src = "my_script.js"; 
    document.body.appendChild(s); 
}, false); 

あなたが他のHTMLを持っている場合は、追加したい、あなたinnerHTMLを使用することができますが、それは使用しないように、時には良いでしょうそれはすべての要素を置き換えます(前に設定されたイベントリスナーをいくつか破る可能性があります)。代わりにinsertAdjacentHTMLを使用できます。スクリプトは、この方法で追加された場合、それは実行されないことに注意してください:コードは、これらのオプションを使用することによって付加されますどこ

document.addEventListener('DOMContentLoaded', function(){ 
    var code = '<style>.class{color:red}</style><div class="class">Hello</div>'; 
    document.body.insertAdjacentHTML('afterbegin', code); 
}, false); 

は、あなたが選択することができます。beforebeginafterbeginbeforeendまたはafterendを。

+0

ありがとうございます。私のスクリプトでは、div、cssなどを追加するためにdocument.writeも使用しています。これらを追加するにはcreateElementが最適な選択ですか? – kevinkt

+0

@kevinktこれは動作しますが、挿入する要素がたくさんある場合は悪夢です。私が提供した例は単なるスクリプトのものです。私の答えの変更を見てください。 – blex

+0

素晴らしいです。これは私が必要とするもののように見えます。私のコードセクションが大量であっても、このコードは機能しますか?私はそこに注入する必要がある300行のコードを持っています。 – kevinkt

0

W3Scoolsは言う:

の定義と使用法 write()メソッドは、ドキュメントにHTML表現やJavaScriptコードを書き込みます。

write()メソッドは主にテストに使用されます.HTMLドキュメントが完全に読み込まれた後に使用される場合、は既存のHTMLをすべて削除します。

注:このメソッドをテストに使用しない場合は、document.open()メソッドで開かれた出力ストリームにテキストを書き込むためによく使用されます。以下の「その他の例」を参照してください。

1

いいえ、document.writeは、<script>の後にHTMLをインラインで書き込みます。 body要素(<div>など)のinnerHtmlを変更できますが、HTMLが最初に読み込まれるまで待つ必要があります。

スクリプトを編集することはできません。スクリプトコールを<div>に置き、CSSを使用して<div>を一番上に配置する必要があります。 (または、インラインのjavascriptを使用して、ページ上のhtml要素を並べ替える)、<div>が必要な場所に移動されます。

+0

本文全体の「innerHTML」を変更しないでください。 – Oriol

1

document.writeを使用しないでください。体全体をinnerHTMLで再解析しないでください。

あなたは、HTML文字列を挿入するinsertAdjacentHTMLを使用することができます。

document.body.insertAdjacentHTML('afterbegin', htmlStr); 

それとも、いくつかの要素前に付加することができます

var el = document.createElement('div'); 
// ... insert your data to `el` 
document.body.insertBefore(el, document.body.firstChild); 
関連する問題