【问题标题】：Youtube - SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frameYoutube - SecurityError：阻止了一个带有“null”来源的框架访问一个跨域框架
【发布时间】：2014-10-16 14:24:40
【问题描述】：

我创建了一个网站，它会打开一个带有以下 JavaScript 代码的弹出窗口：

document.getElementById("i_song_name").innerHTML = 
'<iframe width="100" height="100" src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1" id="i_song_name_i"></iframe>';

此代码将iframe 标记添加到span 标记。

然后在 JS 中，我想用这段代码获取 YouTube 网站的标题：

 document.getElementById("h3").innerHTML =
       document.getElementById("i_song_name_i")
           .contentWindow.document.head
           .getElementsByTagName("title")[0].innerHTML
           .replace(" - YouTube", "");

所以我想要这个代码：

<span id="i_song_name">
        <iframe width="100" 
                height="100" 
                src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1"
                id="i_song_name_i"></iframe>
</span>
<div id="h3">Ahrix - Nova [NCS Release]</div>

很遗憾，我的浏览器（谷歌浏览器）仍然打印错误：

SecurityError: Blocked a frame with origin "null" from access cross-origin frame.

知道如何解决这个问题吗？

【问题讨论】：

这是保护的目的。也许您可以为此使用 youtube API。
我没有将此作为答案发布，因为它使用 jQuery，而您没有表明您正在使用它。但这里有一个使用 AJAX 请求页面 HTML 然后从中检索标题的示例：stackoverflow.com/questions/7599365/…。换句话说，您可以通过 AJAX 单独调用来获取标题。
顺便说一句，该文章中的答案之一使用正则表达式将标题从响应文本中提取出来。这是你可以用纯 javascript 做的事情。
@PDKnight 我正在删除我的答案，因为它不会像我发布的那样起作用。深入挖掘后，我发现 YouTube 正在阻止跨站点请求。如上所述，您很可能需要查看 YouTube API 以获取视频名称。对于浪费您的时间，我深表歉意。
这篇文章可以帮助您熟悉 YouTube API：apiblog.youtube.com/2012/05/…

标签： javascript iframe

【解决方案1】：

我解决了！我使用了 YouTube API，它运行良好 :)

编辑（2015 年 12 月）：这是代码的修复版本：

Working demo

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #player {
            display: none;
        }
    </style>
</head>
<body>
<div id="player"></div>
<div id="h3"></div>
<input type="text" placeholder="Type YTB link here" id="input_ytb_link">
<input type="button" value="Confirm!" id="confirm_btn">
<script>
/* String.startsWith(str) */
if (typeof String.prototype.startsWith != 'function'){String.prototype.startsWith = function (str){return this.indexOf(str) == 0;};}

var tag = document.createElement('script'),
    player;
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    // do nothing...
}
function setPlayer(w, h, url, eventz) {
    if (/^https?:\/\/(www\.)?youtube\.com\/.+\?(.+)?v=(.+)?$/.test(url)) {
        if (document.getElementById('player'))
            document.getElementById('player').outerHTML = '<div id="player"></div>';
        player = undefined;
        document.getElementById('h3').innerHTML = 
                'Processing, please wait a second...';
        var pos = url.indexOf('v='),
            id = url.substring(pos+2,pos+13);
        player = new YT.Player('player', {
                height: h,
                width: w,
                videoId: id,
                events: eventz
        });
    }
}
function onPlayerReady(evt) {
        document.getElementById('h3').innerHTML = 
                evt.target.getVideoData().title;
        //evt.target.playVideo();
}
confirm_btn.addEventListener('click', function(){
    setPlayer('1','1', input_ytb_link.value, {'onReady':onPlayerReady});
});
</script>
</body>
</html>

感谢您的帮助！！

【讨论】：