iframe预订表格中的问题选择元素

问题描述 投票：1回答：1

我正在尝试在此iframe预订表格中选择电子邮件字段。我最终想对该字段进行其他操作，但现在作为测试，我只想选择元素并更改占位符。

收到此错误，因此我没有正确选择它：未被捕获的TypeError：无法在HTMLButtonElement.changeCopy

上将属性“ placeholder”设置为null

您可以在此处查看我的代码的实时版本，并在单击顶部的按钮时在控制台中看到错误：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 dom iframe
1个回答
0
投票

字段为null的原因是，当设置变量时，该值被阻止。尝试在页面上打开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>
addEventListener("load", function() {
    var iframe = document.getElementById("booking-widget-iframe");
    iframe.contentWindow.postMessage({
        setIt: "hello"
    });

});
addEventListener("message", function(e) {
    console.log(e);
})
</script>

警告：未经测试的代码，但这是基本思想：使用客户端JavaScript，您不能直接编辑iframe的元素，因此与其通信的方法是使用iframe.postMessage将消息发送到iframe。在iframe上，您可以阅读事件监听器“ message”附带的消息（或者可以执行window.onmessage）。然后，您可以将JSON数据或文本作为消息发送到iframe，并使用e.data进行读取。因此，在上面的示例中，当github主页面想要将占位符的值更改为特定值时，它只是将包含占位符数据的JSON对象发送到iframe，然后在iframe源端，它将读取传入的消息，检查JSON是否具有用于设置占位符的设置键，以及是否具有该键，然后将占位符的值设置为该属性的值。

让我知道是否还有其他问题。

这里有一些参考资料：

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessagehttps://blog.teamtreehouse.com/cross-domain-messaging-with-postmessagehttps://javascript.info/cross-window-communicationhttps://bl.ocks.org/pbojinov/8965299https://www.ilearnjavascript.com/plainjs-postmessage-and-iframes/https://medium.com/@Farzad_YZ/cross-domain-iframe-parent-communication-403912fff692

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.