document.querySelector 在控制台中工作，但不能实时工作

Question

我正在创建一个简单的 html 页面，其中 iframe 内有一个音频播放器。 我需要为桌面和移动设备启用自动播放功能。

这位玩家就是这个：

<div style="width: 100%"><iframe src="https://players.rcast.net/fixedbar1/66549" frameborder="0" scrolling="no" autoplay style="width: 100%"></iframe></div> 

我把这个块放在html页面的底部：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>

    
    
    document.addEventListener("DOMContentLoaded", function() { 
        // this function runs when the DOM is ready
        setTimeout(function(){
            document.querySelector('.play-btn').click();
        },3000); //delay is in milliseconds 

    });

</script>

使用 Firefox 控制台

document.querySelector('.play-btn').click();

工作正常，但在运行时我得到：

Uncaught TypeError: document.querySelector(...) is null

有什么想法或最好的方法吗？

谢谢， 红色

Answer 1

您可以在控制台中执行任何您想要的操作，但只有当您的 iframe 域与当前域匹配时，您才能以编程方式访问 iframe 内容。

话虽如此，您可以：

选择 iframe，然后在 iframe 上运行查询选择器（您甚至不需要 jQuery）：

const iframeElement = document.querySelector('iframe'); 
iframeElement.querySelector('.play-btn').click();

温馨提示：

1. 您也可以直接拨打

   play()

   来播放视频/音乐 媒体元素。这样你就可以省掉刺激的点击 按钮。

2. querySelector

   比

   getElementById

   慢，您可以为您的 iframe/button/media 元素分配一个

   id

   属性并直接找到它。

   它还将帮助您避免错误，因为

   querySelector

   返回第一个匹配项。因此，如果您有多个

   iframe

   或多个具有

   .play-btn

   类的元素，则可能会导致意外的行为。

Answer 2

您应该首先选择 iframe 并获取其内容窗口以访问其上的所有元素。

const myIframe = document.querySelector('#iframe_id')
const myIframeDocument =myIframe.contentWindow.document
const myElement = myIframeDocument.body.querySelector('#target_element')

值得注意的是，iframe 应该在进程和域冲突之前完全加载

Answer 3

希望这有帮助：

   <iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play button</a>
<script>
 $("#playvideo").click(function(){
  $("#video1")[0].src += "?autoplay=1";
 });
</script>

我在 Grepper 上找到了这个，但它来自另一个 Stack Overflow 帖子。 如果这没有帮助，我发现了一个不同的帖子，似乎与该错误更相关。