Working demo

Question

我创建了一个网站，用这个 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：阻止原始“null”的帧访问跨源帧。

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

Answer 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>

感谢您的帮助!!

Youtube - SecurityError：阻止原始“null”的帧访问跨源帧

1 个答案:

Working demo