在electron-vue客户端开发中避免不了嵌入其他第三方网站
以下给出electron-vue基于webview渲染第三方网站的技术总结
首先在vue页面中写入webview标签并定义src路径webViewSrc
methods写入方法:
operateWebview(item){this.webViewSrc = 'https://xxxxx/index.html?id='+item.id;this.$nextTick(function(){// 选择页面中的webview元素const webview = document.querySelector('#web-view')// 监听webview的加载状态webview.addEventListener('did-stop-loading', () => {webview.executeJavaScript(`// 操作第三方网站中的dom,例:$("#dom-id").click(function(){alert("嵌入成功");})// 还可以请求接口,如果有跨域问题,请直呼后台或jsonp请求$.ajax({type:'POST',dataType: "json",data:{},url:'https://xxxxx/xxx/xx',success:function(data){if(data.success){alert("请求成功");}else{alert(data.message);}},error:function(err){alert(JSON.stringify(err));}})`)})})}
利用electron提供的webview.executeJavaScript方法可以操作嵌入网页的dom元素
addEventListener监听要写在this.$nextTick(() => {})里