记一次需求完成的经过,要获取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开发中心依然一直有错误提示,没有找到问题的根源。