加载后如何从 iframe 中选择内容
Posted
技术标签:
【中文标题】加载后如何从 iframe 中选择内容【英文标题】：How to select content from an iframe after loaded 【发布时间】：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，顺便说一下，它会显示您的订阅供稿。
【问题讨论】：
【参考方案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 的源等时遇到同源错误，我认为您可能必须再次更改标题。同样，我从来没有在扩展程序中绕过同源策略，所以不确定它是如何工作的。以上是关于加载后如何从 iframe 中选择内容的主要内容，如果未能解决你的问题，请参考以下文章
Fancybox iframe 内容 - 如何从父级访问 CSS？
如何扩展 iFrame/将内容从 iFrame 移动到 div？ [复制]