vue2.0打开第三方页面
2018-09-26 本文已影响0人
简小咖
场景是酱婶的：
vue页面提交数据后走第三方接口，返回的数据是一个html页面，页面上有一个隐藏的form，和隐藏的js，js中有window.onload自动提交表单，打开第三方的另一个页面。
我们要做的是解析返回的html数据，并弹出第三方的页面。
尝试了很多方法，因为vue一次性加载解析数据之后，不能解析js中的window.onload。于是我发返回的数据，自己截取了其中form，用vue的方法重新写了onload，就加载了。方法如下：
接口返回的html数据
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title>
<script src="第三方地址"></script> </head>
<body>
<form action="。。。。。（第三方地址）" method="post" id="autoForm">
<input type="hidden" name="corpRegKey" value="。。。。。。信息">
<input type="hidden" name="CLType" value="。。。。。。信息"> <input type="hidden" name="corpName" value="名称">
<input type="hidden" name="reqSource" value="0"> </form>
</body>
<script type="text/javascript">
window.onload=function(){ document.getElementById("autoForm").submit(); }
</script>
</html>
以上是第三方返回数据，有保密信息用。。。省略了，这段里主要用的是form和js
js
data() {
bankHTML: ''
},
methods: {
open() {
var str = 'HTML返回数据'
var start = '<body>'
var end = '</body>'
var s = str.indexOf(start) + start.length
var e = str.indexOf(end)
this.bankHTML = str.substring(s, e)
// 截取body中的form部分，返回传到页面上bankHTML，让页面解析
this.$nextTick(function() {
//必须用nextTick，让页面解析form之后再执行下面的程序
if (document.getElementById('autoForm')) {
document.getElementById('autoForm').target = '_blank'
document.getElementById('autoForm').submit()
//用document找到form，然后用_blank打开新页面，提交表单
}
})
}
}
html
v-html解析html
<div v-html="bankHTML"></div>
