Question

我已在Chrome扩展程序的页面上的iframe中嵌入了YouTube视频：

<div id="container" class="streamContainer">
    <iframe id="vid" class="streamEmbed" src="https://www.youtube.com/embed/prd2RfhF1tM" frameborder="0" allowfullscreen="false" ></iframe>
</div>

嵌入工作在几周前工作正常，但在最近几周，嵌入式屏幕将间歇性地不加载，而是显示完全黑屏。当我打开控制台检查错误时，我看到以下错误：

Uncaught Error: Failed to construct 'IntersectionObserver': Unable to get root node in main frame to track.
at new MZ (https://www.youtube.com/yts/jsbin/player-en_US-vflVlxFvV/base.js:3715:122)
at new g2 (https://www.youtube.com/yts/jsbin/player-en_US-vflVlxFvV/base.js:3999:112)
at g2.create (https://www.youtube.com/yts/jsbin/player-en_US-vflVlxFvV/base.js:6995:333)
at Gi.<anonymous> (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:269)
at Gi.l.jb (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:507:308)
at Ki (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:505:143)
at Gi.l.oa (https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:498:176)
at https://www.youtube.com/yts/jsbin/www-embed-player-vfl-i_LLs/www-embed-player.js:557:378

IntersectionObserver似乎相当新，所以似乎没有关于此错误的大量信息。知道可能导致它的原因吗？

编辑：

的manifest.json：

{


"manifest_version": 2,

  "name": "FactPopUp",
  "description": "Creates notifications for fact-checking tweets.",
  "version": "2.1.0",

  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  },

  "background": {
    "scripts": [
        "keys.js",
        "js/alert.js",
        "lib/CryptoJS v3.1.2/rollups/hmac-sha256.js",
        "lib/CryptoJS v3.1.2/components/enc-base64-min.js"
    ],
    "persistent": true
  },

  "content_security_policy": "media-src https://pbs.twimg.com/media/* 'self'; img-src https://pbs.twimg.com/ 'self' data: chrome-extension-resource:;  script-src 'self'; object-src 'self'",

  "permissions": [
    "notifications",
    "activeTab",
    "alarms",
    "fontSettings",
    "https://ajax.googleapis.com/*",
    "https://stream.twitter.com/*",
    "http://www.politifact.com/*",
    "https://pbs.twimg.com/*",
    "https://raw.githubusercontent.com/ReportersLabDuke/FactPopUp/*",
    "gcm",
    "storage",
    "https://*.servicebus.windows.net/*",
    "management",
    "alarms"
  ], 
  "externally_connectable": {
    "matches": [
      "https://stream.twitter.com/*",
      "http://www.politifact.com/*"
    ]
  },
  "web_accessible_resources": [
    "logo.png"
  ]

}

使用iframe的完整html页面：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Debate video player</title>
    <style>
        body {
            font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
            font-size: 100%;
            margin:0;padding:0;height:100%;overflow: hidden;
        }

        html {margin:0;padding:0;height:100%;}

        #status {
            /* avoid an excessively wide status text */
            white-space: pre;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 400px;
        }

        .streamEmbed {
            width: 100%    !important;
            height: 100%   !important;
        }

        .streamContainer {
            width: 100%    !important;
            height: 100%   !important;
        }
    </style>

    <script type="text/javascript" src="js/streamspage.js"></script>
</head>
<body>
    <div id="container" class="streamContainer">
        <iframe id="vid" class="streamEmbed" src="https://www.youtube.com/embed/prd2RfhF1tM" frameborder="0" allowfullscreen="false" ></iframe>
    </div>
</body>
</html>

使用iframe在页面上运行的Javascript：

// JavaScript source code
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = process;
window.onload = function () {
    xhr.open("GET", "https://raw.githubusercontent.com/ReportersLabDuke/FactPopUp/master/livestream_url", true);
    xhr.send();

}

function process()
{
  if (xhr.readyState == 4) {
    var url = xhr.responseText;
    console.log(url);
    document.getElementsByTagName("iframe")[0].setAttribute("src", url);
  }
}

在Chrome扩展程序中嵌入YouTube视频时出现IntersectionObserver错误

0 个答案: