如何检查 iframe 是否已加载？ 以及如何与 iframe 中的元素进行交互？

Question

我已经接近了这么多。 现在，我看到了内部文件。

var ifrm = document.getElementsByClassName("css-axxz1")[0].children[0];
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
console.log(doc);
doc.onload = function(){
    alert("hi");
};     

但是，我在那里什么也看不到。

所以，我添加了onload以确保它完全加载。

var ifrm = document.getElementsByClassName("css-axxz1")[0].children[0];
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
console.log(doc);
doc.onload = function(){
    alert("hi");
};     

但结果是一样的。 这是一个空文件。 并且警报没有出现。

我想向 iframe 中的按钮元素添加一个点击侦听器。 然后，获取 iframe 中输入元素的值。

但问题是，按钮没有 ID。 但它有类名。

<button color="#A13354" data-qa="ok-button-visible deep-purple-ok-button-visible" class="button__Buttoewzc s2sWPP"></button>

我该如何实施这些？

Answer 1

您需要提供更多详细信息，例如 codepen 或 jsfiddle 链接，否则很难回答您的问题。

然而，

我找到了以下链接。

https://www.dyn-web.com/tutorials/iframes/refs/iframe.php

注意：这些跨文档交互只有在文档具有相同来源时才可能。 postMessage 方法提供了跨域交互的方式。

有关同源策略的更多信息 - https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

解决上述问题后，您可以使用添加点击侦听器

document.getElementsByClassName("button__Buttoewzc")