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's load event或让您的同事use postMessage in reverse, to notify you to fire your event.来完成

有关详细信息，请查看HTML5 Specification on Web Messaging。

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

1 个答案: