Question

我已经制作了一个Chrome扩展程序，可以加载我的新标签页，其中包含<iframe>我的YouTube订阅页面（我遇到了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是显示订阅Feed的div。

Answer 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');
});

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

1 个答案: