1

他の人のページ内でコードを実行できるようにしたい。

簡単に理解できるように、次の例を示します。

ロード後にiframeページの色を変更したいとします。

 document.body.style.backgroundColor = "#AAAAAA";

 document.getElementById('targetFrame').contentWindow.targetFunction();
4

1 に答える 1

3

他の人のページの場合。相手の協力なしには、これを行うことはできません。あなたのようなランダムな人々が他の開発者によって書かれたアプリケーションに対して任意にコードを実行できる場合、これがWebのセキュリティに与える影響について考えてみてください。あなたは良い性格だと確信していますが、これがデータセキュリティにとって大きな問題となるところまで、道徳的な繊維が不足している人々は十分にいます。

そうは言っても、このセキュリティルールには例外があります。でも。

たとえば、他のWeb開発者が自分のページでコードを実行する許可を与えた場合、HTML5 window.postMessage APIを使用して、あるコンテキストから別のコンテキストにメッセージを渡し、そのメッセージを受信したときにコマンドを実行できます。

明確にするために、これには、他の開発者が自分のWebサイトにリスナーを登録して、自分のWebサイトから送信されるイベントをリッスンする必要があります。

同僚のサイトのコード：

// register to listen for postMessage events
window.addEventListener("message", changeBackground, false);  

// this is the callback handler to process the event
function changeBackground(event)  
{  

  // you're colleage is responsible for making sure only YOU can
   // make calls to his/her site!
  if (event.origin !== "http://example.org:8080")  
    return;  

  // event.data could contain "#AAAAAA" for instance
  document.body.style.backgroundColor = event.data;
  // do other stuff
  }
}

あなたのコード：

// pass the string "#AAAAAA" to the iframe page, where the changeBackground
 // function will change the color
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin);

iframeの読み込みが完了したときにこのコードを実行するには、もちろんこれを検出できる必要があります。これは、iframeの読み込みイベントを使用するか、同僚にpostMessageを逆に使用させて、起動するように通知することで実行できます。あなたのイベント。。

詳細については、WebメッセージングのHTML5仕様を確認してください。

于 2012-05-20T07:07:04.350 に答える