嵌套iframe中YouTube视频提示JS不可用的原因及修复方案

Q1：为何会出现JavaScript不可用的错误？ #

问题出在iframe的sandbox属性配置上：

• 当给iframe设置sandbox="allow-same-origin"时，沙箱模式会启用严格权限限制，所有未明确声明允许的权限都会被默认禁用，其中就包含JavaScript执行权限。
• 即便浏览器全局未禁用JS，沙箱规则会强制限制当前iframe内的脚本运行，导致YouTube嵌入播放器无法加载必要的JS代码，进而触发错误。

Q2：如何在不改变iframe架构的前提下修复该问题？ #

只需在两个iframe的sandbox属性中添加allow-scripts权限，同时保留原有需要的权限项即可：

修改后的index.htm #

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>  
   iframe {
      border: none;
      display: block;
   }
   </style>
</head>    
<body>
   <iframe id="main-frame" src="child.htm" frameborder="0" sandbox="allow-same-origin allow-scripts" allowfullscreen></iframe>
</body>
</html>

修改后的child.htm #

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe width="640" height="480" src="https://www.youtube.com/embed/jNQXAC9IVRw" 
        title="Me at the zoo" frameborder="0" sandbox="allow-same-origin allow-scripts"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>
</body>
</html>

这样既保留了原有的双层iframe架构，又通过明确允许脚本执行权限，让YouTube播放器能正常加载运行所需的JavaScript代码。

内容的提问来源于stack exchange，提问作者PavelDev