访问 iframe DOM答案

【问题标题】：Accessing iframe DOM访问 iframe DOM
【发布时间】：2015-03-11 02:19:18
【问题描述】：

我想在调整大小时停止 YouTube 播放

我有一个 iframe

  <iframe id="tutube" class="youTubeVideo" frameborder="0" height="100%" width="100%" allowscriptaccess="always"
    src="https://youtube.com/embed/d3cRXJ6Ww44?showinfo=0&autohide=1&enablejsapi=1">
  </iframe>

还有一个函数

function stopTheVideo(){
    var div = document.getElementById("tutube");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
            };

我称之为

<body onresize="stopTheVideo();"

我得到了

Uncaught TypeError: Cannot read property 'contentWindow' of undefinedindex10.html:198 toggleVideoindex10.html:206 resizeFunctionsindex10.html:31 onresize

有什么想法吗？

【问题讨论】：

好吧，如果我设置 var state = 'hide'，它确实可以在 FF37 和 Chrome 41 上工作
我只是将它粘贴到一个新的 html 文件中，在 chrome、ff 和 safari 上进行了测试。不工作
Safari 7.1.3 对我来说也适用于小牛。没有抛出错误。注意我还添加了<div id="tutube">。
啊，我给了iframe那个ID
不，它是它的容器，但如果它是页面中唯一的 iframe 元素，您可以通过 var iframe = document.getElementsByTagName("iframe")[0].contentWindow; 访问它

标签： javascript iframe youtube onresize

【解决方案1】：

试试这个：

<body onresize="stopTheVideo();">
<div id="tutube">
    <iframe id="youTube" class="youTubeVideo" frameborder="0" height="100%" width="100%" allowscriptaccess="always"
    src="https://youtube.com/embed/d3cRXJ6Ww44?showinfo=0&autohide=1&enablejsapi=1">
      </iframe>
</div>
<script>
var state= 'hide';
function stopTheVideo(){
    var div = document.getElementById("tutube");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = (state == 'hide') ? 'none' : '';
    func = (state == 'hide') ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
            };
</script>
</body>

【讨论】：

但随后它消失了。它应该留下来
不，您将显示设置为无，因此它会消失。如果您想在下次通话时显示，请在隐藏时将 statevar 设置为 'hide' 以外的其他值
是的，删除这一行：div.style.display = (state == 'hide') ? 'none' : '';
我不太明白。 hide有特殊含义吗？？
state 是一个布尔值，通过更新它的值，您可以决定您的函数将隐藏 iframe 并停止视频（函数中 ? 之后的第一种情况）或显示和播放（第二种情况，在:之后）