前军教程网

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