webview加载不出网页_electron-vue爬坑之webview第三方网站渲染

在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(() => {})里