Question

是否可以检测在iframe中单击了哪个元素？

Axios({
  url: CLOUDINARY_URL,
  method: "POST",
  skipAuthorization: true,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  data: fd
})
  .then(response => {
    this.getFileUrl(response.data.secure_url);

    if (response.statusText === "OK") {
      this.setState({ isLoading: false });
      //console.log(this.state);
      toast("File Upload Successful");
      this.props.saveFileInputAnswer(
        this.state.fileUrl,
        this.props.item._id
      );
    }
  })
  .catch(error => {
    console.log("Error", error);
  });

var iframe = document.getElementById("my_iframe");
	iframe.document.addEventListener('click', function(event) {		
		console.log(this.id);
	}, false);

Answer 1

您需要在iframe上使用.contentWindow.document：

var iframe = document.getElementById("my_iframe");
iframe.contentWindow.document.addEventListener('click', function(event) {		
	console.log(this.id);
}, false);

<iframe id="my_iframe"
        src="https://fr.wikipedia.org/wiki/Wiki"
        frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px"
         height="100%" width="100%">
</iframe>

请记住，您仍然需要处理讨厌的cross-origin issue。（如果该iframe的来源与您当前访问的网站的来源不同，则您将无法看到该iframe中的任何元素，也几乎不能访问该iframe中的任何内容。）

如果您同时有权访问两个站点，则可以与postmessage API通信：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

如何检测iframe javascript中单击了哪个元素

1 个答案: