加载后如何从 iframe 中选择内容答案

【问题标题】：How to select content from an iframe after loaded加载后如何从 iframe 中选择内容
【发布时间】：2016-06-04 16:49:14
【问题描述】：

我制作了一个 Chrome 扩展程序，它使用我的 YouTube 订阅页面的 <iframe> 加载我的新标签页（我解决了 SAMEORIGIN 问题）并希望将文档的一个元素复制到另一个 <div> ，准确地说是#content 元素。这是我的代码：

Background.html

<html> 
    <head>   
        <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="window.js"></script>
    </head>
    <body>
        <iframe id="left"  name="left"></iframe>
        <div id="canvas"></div>
    </body>
</html>

Window.js

$(document).ready(function(){
    var $left = $('#left');

    $left.attr('src', 'https://www.youtube.com/feed/subscriptions');

    var $leftDoc = $left.contentWindow.document;
    $leftDoc.querySelector('#content').clone().appendTo('#canvas');
});

Script.js

chrome.webRequest.onHeadersReceived.addListener(
    function(info) {
        var headers = info.responseHeaders;
        for (var i = headers.length - 1; i >= 0; --i) {
            var header = headers[i].name.toLowerCase();
            if (header == 'x-frame-options' || header == 'frame-options') {
                headers.splice(i, 1); // Remove header
            }
        }
        return {
            responseHeaders: headers
        };
    }, {
        urls: ['*://*/*'], // Pattern to match all http(s) pages
        types: ['sub_frame']
    }, ['blocking', 'responseHeaders']
);

就像现在一样，YouTube 已加载，但我无法获取 <iframe> 中的文档，因为它将该属性称为 undefined。我试图让div#content 加载而无需其他任何东西，以便从我的新标签页导航。有任何想法吗？谢谢！

编辑：#content 是 div，顺便说一下，它会显示您的订阅供稿。

【问题讨论】：

标签： javascript jquery html iframe google-chrome-extension

【解决方案1】：

您似乎在 jQuery 对象上使用了诸如 contentWindow 之类的本机方法，而不是等待 iframe 加载，您想要的是更多

$(document).ready(function(){
    var $left = $('#left');

    $left.on('load', function() {
        $(this).contents().find('#content').clone().appendTo('#canvas');
    });

    $left.attr('src', 'https://www.youtube.com/feed/subscriptions');
});

【讨论】：

太好了，这行得通！我有一个后续问题。我没有收到与SAMEORIGIN 问题类似的错误。发生这种情况时，我是否应该添加另一个侦听器来再次调用script.js？完整的错误是：Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://XYZ" from accessing a frame with origin "https://www.youtube.com". The frame requesting access has a protocol of "chrome-extension", the frame being accessed has a protocol of "https". Protocols must match.
不太确定，但是 script.js 添加了一个事件侦听器，我认为每次收到标头时都会触发，并且会为每个请求回避同源策略？如果您在更改 iframe 的源等时遇到同源错误，我认为您可能必须再次更改标题。同样，我从来没有在扩展程序中绕过同源策略，所以不确定它是如何工作的。