在 Chrome 扩展中使用 javascript/jquery 访问框架的 DOM
Posted
技术标签:
【中文标题】在 Chrome 扩展中使用 javascript/jquery 访问框架的 DOM【英文标题】：Accessing DOM of frame using javascript/jquery in Chrome extension 【发布时间】：2013-02-01 10:25:38 【问题描述】：我正在开发一个 chrome 扩展程序，它可以从网页中提取元数据和一些文本元素。当该信息包含在给定页面的框架中时，我遇到了挑战。
为我正在使用的页面获取以下示例框架集（为简洁起见，实际框架名称、标题和来源已更改）。
<frameset id="fs" border="0" frameborder="no">
<frame src="/src1" name="frame1" noresize="noresize" scrolling="no" frameborder="0" title="FrameNumber1">
<frame src="/src2" name="frame2" noresize="noresize" scrolling="no" frameborder="0" title="FrameNumber2">
<frame src="/src3" name="frame3" noresize="noresize" scrolling="auto" frameborder="0" title="FrameNumber3">
<frame src="/src4" name="frame4" noresize="noresize" scrolling="no" title="FrameNumber4">
</frameset>
并且，考虑 FrameNumber3 的以下 html sn-p：（这更做作，只是为了示例的目的）
<html>
<head>
<title>FrameNumber3</title>
</head>
<body>
<h1 id="heading">This is what I want</h1>
</body>
</html>
我尝试了许多不同的方法，其中大多数都围绕着对 jquery 选择器中正确上下文参数的不同猜测。
我已经尝试了几十个，但这里有一些我认为可以实际工作的示例：
通过Run JQuery in the context of another frame
alert($('#heading', window.parent.frames[0].document).text());
//Uncaught TypeError: Cannot read property 'document' of undefined
alert($('#heading', window.parent.frames[2].document).text());
//Tried this, because I want the 3rd frame's information
//Uncaught TypeError: Cannot read property 'document' of undefined
通过Accessing an element in a frame using a jQuery reference to the frame
alert($('#heading', $('frame').get(2).contentWindow.document).text());
//Uncaught TypeError: Cannot read property 'document' of undefined
通过其他页面：
alert($('#heading', $('frame[title="FrameNumber3"]').document).text());
//no error but returns "undefined"
alert($('#heading', $('frame[title="FrameNumber3"]').contents()).text());
//no error but returned "undefined"
我认为这不是 chrome 扩展程序中的权限问题，因为我已经解决了这个问题。我认为我可能对进入框架 DOM 有一些不理解的地方。我还读到 jquery 在框架方面并不是最可靠的，所以我想这也可能是问题所在。
提前感谢您提供任何反馈或帮助。
【问题讨论】：
【参考方案1】：也许question 的答案会有所帮助。
document.querySelector('#SomeFrameSelector').contentWindow.document.body.onload
【讨论】：
以上是关于在 Chrome 扩展中使用 javascript/jquery 访问框架的 DOM的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 扩展中使用 javascript/jquery 访问框架的 DOM
在 chrome 扩展中运行 jquery 之前的 javascript [关闭]
在 Chrome 扩展程序中运行 Javascript -> 基本？
使用 JavaScript 将 Chrome 扩展注入 iFrame