Причина, по которой поле имеет значение 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"; имеет значение null, а в том, что поле никогда не было установлено, поскольку оно было заблокировано из источника из разных источников.
Способ исправить это: если у вас есть доступ к 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>
Предупреждение: непроверенный код, но вот основная идея c: со стороны клиента JavaScript, вы можете непосредственно редактировать элементы iframe, поэтому способ связи с ним - отправить сообщение в iframe с помощью iframe.contentWindow.postMessage. На стороне iframe вы можете прочитать это сообщение, которое приходит с «message» прослушивателя событий (или вы можете сделать window.onmessage). Затем вы можете отправить JSON данные или текст в виде сообщения в iframe и прочитать его с помощью e.data. Таким образом, в приведенном выше (непроверенном) примере, когда главной странице github требуется изменить значение заполнителя на определенную сумму c, он просто отправляет объект JSON, содержащий данные заполнителя, в iframe, а затем на Сторона источника iframe читает это входящее сообщение, проверяет JSON, имеет ли он установленный ключ для установки заполнителя, и, если он имеет этот ключ, затем устанавливает значение заполнителя в значение этого свойства.
Дайте мне знать, если у вас есть еще вопросы.
Вот несколько ссылок:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage https://javascript.info/cross-window-communication 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