小弟不才,未经过系统学习,劳烦大神帮忙分析分析这个奇怪的问题。
我通过编写chrome插件,将content-script.js注入到了目标网站(目标网站前端用vue开发),试图通过popup.html页面的几个按钮,试图去操作目标页面的数据,以期望节约重复工作的时间,提升工作效率!
因为对jquery熟悉,所以最终生成的页面中有vue和jquery,我用此代码
$(function(){
element=$(".el-date-editor").find("input");
element.val('2030-12-31');
chufa(element[0],'input');
});
//这个函数我搜索出来说是绑定浏览器自身的事件触发,通过这个函数,我发现jquery可以更新vue生成的网页中的大部分input的展现形式,及input的value="值"
function chufa(element,eletype){
var event = document.createEvent('HTMLEvents');
event.initEvent(eletype, true, true);
event.eventType = 'message';
element.dispatchEvent(event);
}
操作下面的代码
<div class="el-date-editor">
<input type="text" autocomplete="off" name="" placeholder="请选择xx时间" class="el-input__inner">
</div>
通过chufa这个函数,我发现jquery可以更新vue生成的网页中的大部分input的展现形式,及input的value="值",但是唯独在vue的日期控件处失效了,vue的日期控件是否就是称之为:el-date-picker,就是下图中的这个小控件
我发现通过上图的代码,能够将我眼睛看到的日期input的输入框的值改变为2030-12-31,却无法真正的传递给vue,是vue双向绑定?亦或是vue没有被触发?
试图通过改变代码chufa(element[0],'change');
或者chufa(element[0],'blur');
或者chufa(element[0],'input');
或者chufa(element[0],'focus');
chufa(element[0],'input');
均无济于事。
很奇怪,这个问题困扰我好几个月了,这是我N次尝试突破此处困扰,遗憾的失败了...
特来贵宝地,寻求帮助,希望得到指导,不胜感激!
content.js 运行在独立的沙箱里,与普通网页里的 JS 是隔离的,但是共享同一个 DOM。所以我们可以(也只可以)通过触发事件与网页里的 JS 进行数据交换。但是触发什么事件,就要看网页 JS 侦听什么事件。比如 Vue 默认侦听的是
input
事件,只有.lazy
才会侦听change
事件,所以你也得先尝试input
事件。至于组件,那可能性就更多了,建议看看源码,确定怎么触发以及从哪个节点开始触发。