chrome 扩展开发 - 如何获得iframe中的元素和相关问题解答

记一次需求完成的经过，要获取iframe中的元素，然后在页面进行分段跳转和相关操作，途中遇到了几个问题，方便后续自我回忆。

问题一 chrome扩展开发中 Popup页面无法持续保持的问题【未解决】

这个需求感觉真的很广泛，即每次的Popup页面会随着失去焦点而关闭，再次打开后页面会回到初始页面，无法在页面中记录一些数据后失去焦点依然保持配置或选项。

查询了很多相关资料，有说监听Popup失去焦点事件的，有说直接让焦点事件不关闭的。目前该问题依然未能解决。后续通过网页中写视窗定位（position:fixed）的窗体加载元素来实现了界面构造。

问题二 chrome扩展开发中 iframe中的元素无法获取的问题

通过直接$(‘selector’) 的方式无法直接获得iframe中的元素

需要先根据ID 或者其他属性来获得对应iframe元素

var pdf_obj = document.getElementById('1').contentWindow.document.getElementById('pdf-viewer')

然后将该对象转换为jquery 对象 js和jq的互转方式如下

$('js_obj') // 通过用$()包裹直接将js转换为jq

$('selector')[0] // 通过0下标直接转换为js对象

转换为jq对象后即可进行scroll(), keydown()等事件的绑定和执行

问题三有一些iframe中的元素一开始是没有加载好的，无法获取

这个问题需要等待加载完成后才能进行相关操作，通过设置定时器(interval)进行轮询获取。获取成功后，删除定时器。

var ele_check_timer = setInterval(function(){var pdf_obj = document.getElementById('1').contentWindow.document.getElementById('pdf-viewer');if (pdf_obj){ cleanInterval(ele_check_timer);do something; }}, 3000});

问题四每次需要在chrome扩展文件夹中进行代码调试很麻烦

可以在谷歌浏览器中直接调试代码，按下f12后进入console即可输入代码进行调试。

省去了来回切换。一般网站中都内置了有jquery 如果没有Jquery可以尝试从其他网站中包含过来。

有些网站仅支持指定域名可以尝试使用百度的cdn 原出处 @山岚_

;(function(d,s){d.body.appendChild(s=d.createElement('script')).src='https://libs.baidu.com/jquery/2.0.0/jquery.min.js'})(document);

问题五控制台console操作正确但是就是不能获得元素?

有时候不小心因为其他的操作改变了当前页面后(即从top到了index或者其他页面)会一直无法获取元素，将如下位置设置回到到TOP即可。

问题六轮询获取标签中会有错误提示如何让错误不显示？【未解决】

查询到可以通过 try语法来检测错误但是使用后控制台没有错误提示，chrome开发中心依然一直有错误提示，没有找到问题的根源。