Question

基本上，来自SurveyMonkey的调查正在iframe上加载到我的网页上。该调查具有“完成”按钮，填写调查后需要单击该按钮。现在，当我通过右键单击除“测量”之外的任何地方的页面来检查控制台时，弹出并执行以下语句：

我得到的结果是：

document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");

但是当我检查调查弹出窗口并在控制台中写相同的语句时，会得到以下结果：

HTMLCollection []

基本上我想在按下“完成”按钮时添加一个事件，但是问题是我无法仅通过传递其类来获取对此按钮的引用，因为它会在几秒钟后加载html页面时加载。 >

我什至编写了一个函数，当“完成”按钮显示出来时，它向我发出“嗨”的警告，这没有任何价值。这是代码：-

HTMLCollection [button.btn.small.done-button.survey-page-button.user-generated.notranslate]

以下是“完成”按钮的html：

 $('.btn small done-button survey-page-button user-generated notranslate').on('load',function(){alert('hi'); console.log("survey-loaded");});

Answer 1

尝试在iframe元素加载后访问。

    document.getElementById('your-iframe-id').onload = function() {
        // Create variable for your iframe.
        var iframe = document.getElementById("your-iframe-id");
       //then access its content like this
        var btn   document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");

      //Rest of your code
    }

以上代码仅在没有跨域限制

的情况下有效

Answer 2

您不能从另一个域引用iFrame内容。这将违反Same-origin policy。

iFrame的唯一想法是阻止您操纵其内容，因此SurveyMonkey的内容仍然被认为是安全的。

但是，您可以通过post messages与iFrame进行交互，如果不违反same-origin policy，您可以获得对iFrame内容的引用。

查看类似的问题here和here。

Answer 3

使用委托，将始终位于其addEventListener的页面上的父元素作为目标

    document.querySelector('your-const-    parent-      `element-containing-the-   button').addEventListener('click',(e)=>{
If(e.target.tagName === 'BUTTON')
'your actions'}
);

我希望这有助于#cheers

如何获得对iframe元素的引用？

3 个答案: