さまざまな Web サイト (私の管理下にない) にロードできるウィジェット (いくつかの html コード) がありますが、ウィジェットは私のサーバーでホストされています。
これまで、次のような JavaScript コードを生成する PHP スクリプトがありました。
document.write('<div> ... some more dynamic html ...</div>');
これは、タグを使用して任意の html ページにロードできます。
現在、再設計を計画しており、サーバー側の JavaScript を使用して PHP の部分を実行したいと考えています。まだ document.write() を出力する必要がありますか?それとも、handlebarjs や node.js などがあるので、より賢い方法がありますか? ...
(私は流星 (meteor.com) を使用して仕事をしたかったのですが、流星は完全な html ページを出力し、ページ全体は必要ありません)
あなたの助け/提案をありがとう
現在、再設計を計画しており、サーバー側の JavaScript を使用して PHP の部分を実行したいと考えています。まだ出力する必要がありますか
document.write()
コンテンツがクライアントでレンダリングされる原因となるものを出力する必要があります。
クライアント側のコードは、サーバー側のコードから多かれ少なかれ独立しています (ただし、mojitoなどのツールの使用を開始すると、クロスオーバーが発生する可能性があります。
または、handlebarjs、node.jsなどがあるので、より賢い方法はありますか?
node.js はサーバーであり、ページを変更するための JS はブラウザーで実行する必要があるため、出力内容には役立ちません。
handlebarjs のようなテンプレート言語を使用できます。ライブラリを使用して DOM 操作を支援できます。問題は、ロードするコード (ライブラリを含む) が多いほど、コードが埋め込まれているサード パーティの Web サイトで使用されているものと衝突する可能性が高くなり、それらのページをより重くする (そしてページの重量が大幅に増加する) ことです。二次コンテンツの場合は特にお勧めできません)。
新しい div を既存の HTML ドキュメントに追加する場合は、ドキュメント ツリーに新しい HTML 要素を挿入する必要があります。
// create a new div
var newDiv = document.createElement('div');
// put some text into it
newDiv.innerHTML = 'Hello World!';
// the div won't be displayed yet, because it only exists as a
// variable in limbo outside of the HTML document tree. We need
// to insert it into the document.
// First, we get the HTML node where it should be inserted
var parentDiv = document.getElementById('id_of_the_div_where_the_new_div_belongs_into');
// then we put it into that div
parentDiv.appendChild(newDiv);
ページの最後に div を挿入したい場合 (制御できない多くの異なるページでスクリプトが機能する場合に便利です)、document.appendChild() を挿入することもできます。
新しい div にテキストだけでなく他の HTML ノードも含まれている場合は、document.createElement でそれらを作成し、appendChild で新しく作成した div にそれらを添付する必要があります。
これらを見てみましょう: document.createElement、documentFragment