Fin*_*ler 8 javascript iframe dom
我正在尝试选择此 iframe 预订表单中的电子邮件字段。我最终想对该字段做其他事情，但现在作为测试，我只想选择元素并更改占位符。
收到此错误，所以我没有正确选择它：Uncaught TypeError: Cannot set property 'placeholder' of null at HTMLButtonElement.changeCopy
您可以在此处查看我的代码的实时版本，并在单击顶部的按钮时在控制台中看到错误：https : //finnpegler.github.io/cart_recover/
我还将代码作为下面的片段包含在内，但它会引发与跨源框架不同的错误。
var iframe = document.getElementById("booking-widget-iframe");
var field = iframe.contentWindow.document.querySelector("booking[email]");
function changeCopy() {
field.placeholder = "hello";
}
document.getElementById("button").addEventListener("click", changeCopy)<!DOCTYPE html>
<html lang="en">
<head>
<title>Test site for Cart Recover Tool</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans&display=swap" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Clicking this button should change the placeholder text in the email field below
<button id = "button">Click</button>
</body>
<script src="https://bettercleans.launch27.com/jsbundle"></script><iframe id="booking-widget-iframe" src="https://bettercleans.launch27.com/?w_cleaning" style="border:none;width:100%;min-height:2739px;overflow:hidden" scrolling="no"></iframe>
<script src="script.js"></script>字段为空的原因是因为在设置变量时，该值被阻塞了。尝试在页面上打开 JavaScript 控制台并粘贴
var iframe = document.getElementById("booking-widget-iframe");
就像在源代码中一样，它应该可以工作，但是当你输入时看看会发生什么：
var field = iframe.contentWindow.document.querySelector("booking[email]");
你应该得到类似以下错误的信息：
Uncaught DOMException: Blocked a frame with origin "https://finnpegler.github.io" from accessing a cross-origin frame.
at <anonymous>:1:34
所以问题不field.placeholder = "hello";在于为空，而是从未设置该字段，因为它被跨源源阻止。
解决此问题的方法：如果您有权访问https://bettercleans.launch27.com/?w_cleaning&iframe_id=j8szoz0b4，则在该页面的源代码处输入以下脚本：
<script>
addEventListener("message", function(e) {
console.log(e.data);
if(e.data["setIt"]) {
document.querySelector("booking[email]").placeholder = e.data["setIt"];
e.source.postMessage({
hi:"I did it"
});
}
});
</script>
然后在你的https://finnpegler.github.io/cart_recover/页面源上的某个地方，输入代码：
<script>
var iframe;
addEventListener("load", function() {
iframe = document.getElementById("booking-widget-iframe");
iframe.contentWindow.postMessage({
setIt: "hello"
});
});
addEventListener("message", function(e) {
console.log(e);
})
</script>
警告：未经测试的代码，但这里的基本思想是：使用客户端 JavaScript，您不能直接编辑 iframe 的元素，因此与其通信的方式是使用 iframe.contentWindow.postMessage 向 iframe 发送消息。在 iframe 方面，您可以阅读随事件侦听器“消息”传入的消息（或者您可以执行 window.onmessage）。然后你可以将 JSON 数据或文本作为消息发送到 iframe，并使用 e.data 读取它。所以在上面（未经测试）的例子中，当主github页面想要将占位符的值更改为特定数量时，它只需将包含占位符数据的JSON对象发送到iframe，然后在iframe源端，它读取传入的消息，检查 JSON 是否具有用于设置占位符的 set 键，如果它具有该键，
如果您还有其他问题，请告诉我。
这里有一些参考：
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage https://javascript.info/跨窗口通信 https://bl.ocks.org/pbojinov/8965299 https://www.ilearnjavascript.com/plainjs-postmessage-and-iframes/ https://medium.com/@Farzad_YZ/cross-domain -iframe-parent-communication-403912fff692
| 归档时间： |
|
| 查看次数： |
214 次 |
| 最近记录： |