当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Chrome Extension: IFrame and listening to clicks within it

问题描述:

I would like to insert an iframe (frame.html which is part of my extension) into the body of a website and then be able to receive click events for two buttons inside it.

Running into problems with same origin policy, etc.

I'm sure there is a relatively graceful workaround for this, but I'm not having much luck finding it.

网友答案:

You can use message events to let the injected iframe window communicate with the content script (take care about security).

Here is a simple example. The extension injects an IFRAME element into all viewed pages via a content script. The frame contains a page with a button. The button has a click handler which sends a message to the top window. The content script has a listener to messages coming from the iframe which opens an alert displaying the message data.

manifest.json:

{
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [ {
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "content.js" ],
    "run_at" : "document_end"
  } ]
}

content.js:

var iframe = document.createElement("iframe");    
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);

addEventListener("message", function(event) {
  if (event.origin + "/" == chrome.extension.getURL(""))
    alert(event.data);
}, false);

iframe.html:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <button id="button">Click me!</button>
  <script>
    document.getElementById("button").addEventListener("click", function() {
      top.postMessage("clicked!", "*");
    }, false);
  </script>
</body>
</html>
分享给朋友:
您可能感兴趣的文章:
随机阅读: