加载iframe后，在iframe中执行JavaScript代码？

Question

我希望能够在其他人的页面内执行代码。

以下是一个易于理解的示例：

假设我想在加载后更改某些iframe页面的颜色：

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

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

Answer 1

如果是别人的页面。 如果没有对方的合作，你就不能做到这一点。 想想如果像你这样的随机人员可以随意地对其他开发人员编写的应用程序运行代码，那么这会对Web上的安全性产生什么影响呢？ 虽然我确信你的性格很好，但是有足够多的人在道德光纤较低的地方，这对数据安全来说是一个巨大的问题。

话虽如此，这个安全规则也有例外; 然而。

例如，如果其他Web开发人员授予您在其页面上执行代码的权限，则可以使用HTML5 window.postMessage API将消息从一个上下文传递到另一个上下文，然后在收到该消息时运行命令。

为了澄清这一点，这要求其他开发人员在他/她的网站上注册一个监听器来收听从您的网站发送的事件。

您同事网站上的代码：

// 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规范 。