0

ユーザーのページのルック アンド フィールを変更できるようにする、他のドメインから参照できる Javascript ファイルを作成しようとしています。

たとえば、javascript ファイル (www.mywebsite.com/123.js) は www.userwebsite.com で参照され、以下を含めることができます。

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

これは、ユーザーの Web サイトでホストされている CSS ファイルへの参照を挿入し、テキスト ノード「Hello. This is a new node」を使用して新しい div を DOM に追加します。

ユーザーが CMS (私が作成する) にログインできるようにして、私が提供する Javascript ファイルを変更しなくても、ページに印刷されるテキストを変更できるようにします。CMS は、私の Web サイトでホストされます。

これを行うためのベストプラクティスは何ですか?

明らかに、ユーザーが何も変更する必要なく、javascript ファイルをリモートで編集できますが、それがスクリプトを更新する最良の方法ですか?

ユーザーが変更したいテキストを含むmysqlデータベースを参照するphpファイルから出力を取得するJavaScriptにAjaxリクエストを含めることを考えていましたが、同じオリジンポリシーはそれが不可能であることを意味します。

ありがとう

4

1 に答える 1

0

PHP 出力を取得するために AJAX を使用する必要はありません。PHP出力に設定され<script />た属性を使用して、クライアントにタグをページに追加してもらいます。srcスクリプトが有効な JavaScript を発行することを確認してください。

Web サーバーは、JS アセットではなく PHP ランドにあると認識しているため、必ず正しいページ ヘッダーを発行してください。MIME タイプと有効期限が頭に浮かびます。

header('Content-Type: application/x-javascript');
header('Last-Modified: Mon, 03 Sep 2012 22:33:44 GMT');

さらに、スクリプトが実行される信頼性の低い「敵対的な」環境に注意してください。衝突のリスクを軽減するために、JavaScript スクリプトが宣言するグローバル変数の量を最小限に抑える必要があります。これを行う最も簡単な方法は、IIFE でコードをラップすることです。

// Look ma, no global variables!
(function () {

var thebody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
var txtNode = document.createTextNode("Hello. This is a new node.");   
var divIdName = "mydiv";
var csslink = "http://www.anotherwebsite.com/style.css";
var newcss = document.createElement('link');
newcss.setAttribute('href',csslink);
newcss.setAttribute('rel','stylesheet');
newcss.setAttribute('type','text/css');
newdiv.setAttribute('id',divIdName);
newdiv.appendChild(txtNode);
thebody.appendChild(newdiv);
thebody.appendChild(newcss);

}());

ホストの命名スキームとの衝突を最小限に抑えるために、CSS クラス、要素 ID などにプレフィックスを付けることも検討する必要があります。

于 2012-09-03T21:28:39.393 に答える