使用 document.write 编写 HTML 导致尝试嵌入 YouTube 时出错答案

【问题标题】：Using document.write to write HTML causing errors trying to embed YouTube使用 document.write 编写 HTML 导致尝试嵌入 YouTube 时出错
【发布时间】：2014-12-07 01:17:21
【问题描述】：

我在受密码保护的网站上使用它，所以我无法与您分享网址。我正在尝试使用 document.write 将 JS 调用中的一些 HTML 变白，该调用旨在根据一天中的时间显示不同的 YouTube 视频。它似乎只处理文本，但没有处理其他任何内容。我尝试了许多不同的方法，但似乎都不起作用。这是我正在做的事情：

<script type="text/javascript" language="JavaScript">
var myDate = new Date();
/* hour is before noon */
if ( myDate.getHours() >= 12 && myDate.getHours() <= 18 )
{
    document.write('<iframe width=\"100%\" height=\"340px\" src=\"http://youtu.be/MswheXWqlbQ\" frameborder=\"0\" allowfullscreen></iframe>');
}
else  /* the hour is not between 0 and 24, so something is wrong */
{
    document.write('<iframe width=\"100%\" height=\"340px\" src=\"//www.youtube.com/embed/MswheXWqlbQ\" frameborder=\"0\" allowfullscreen></iframe>');
}
</script>

【问题讨论】：

你可能想看看Why is document.write considered a “bad practice”?
虽然不相关，但是当字符串用单引号引起来时，不需要转义双引号。
是的，我认为 innerHTML 可能是比昨晚 document.write 更好的方法。

标签： javascript html youtube embed document.write

【解决方案1】：

使用官方的 YouTube 嵌入网址：

http://youtube.com/embed/VIDEO_ID 而不是导致跨站请求错误的 youtu.be。

【讨论】：

【解决方案2】：

感谢您的建议。我找到了一个 innerHTML 脚本并尝试了它，它似乎运行良好。

这是我的新脚本：

<script>
function dynamicYT(){

    var d  = new Date();
    var h = d.getHours();

if ((h>=0 && h<=5) || (h>=18 && h<= 23))
{
    document.getElementById("bgText").innerHTML='<iframe width="560" height="315" src="http://youtube.com/embed/MswheXWqlbQ" frameborder="0" allowfullscreen></iframe>';
} else {
    document.getElementById("bgText").innerHTML='<iframe width="420" height="315" src="http://youtube.com/embed/PKrzVIOvvQU" frameborder="0" allowfullscreen></iframe>';
}
}
window.onload = dynamicYT;
</script>

【讨论】：