vue后端渲染(electron-vue爬坑之webview第三方网站渲染)

在electron-vue客户端开发中避免不了嵌入其他第三方网站

以下给出electron-vue基于webview渲染第三方网站的技术总结

首先在vue页面中写入webview标签并定义src路径webViewSrc

<webview id="web-view" ref="webview" rel="external nofollow" :src="webViewSrc" httpreferrer="https://xxxxx/index.html" style="width: 100%; height: calc(100vh - 40px);position: relative;" allowpopups></webview>

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