Let me talk about two of their gossip, lazy, long time no record of their work, I hope not forget the original intention.
Recently I had such a demand, we are device software companies, so there is a function to modify its own management interface IP and port, modify requirements after the completion of the jump to a new page, there will be a problem, that is, the original page to the new IP and port traffic, which involves cross-domain issues, cross-domain problem solving there are many online, I hereby record only two kinds I used.
Our engineering architecture is front-end reverse proxy to a backend via Apache, thus cors this cross-domain method, we should do cors configuration of Apache (original thought was to do the back-end cors configuration), you need to add the following code on Apache :
<Directory />
Header set Access-Control-Allow-Origin *
</Directory>After the restart the Apache configuration, we also need to do a thing with the back end, because this time we are able to call the new IP of the url, but the browser when it detects cross-domain, it sends a request OPTIONS way to pre-check url, this url need to cancel the first back-end detection information, and then return after the success, the browser will send a real url, so that we will be successful cross-domain access
After this treatment we can call on any page in our IP, to tell the truth is very safe, of course * can be changed to a fixed url, so we can only cross-domain calls a function in a fixed url page, but this does not apply to our current demand, or can do but more trouble, because I want to put that * modify the rear end trouble for users of the new IP, and then he again modify the underlying IP. So give up this method
Then I need a cross-domain security without sacrificing way, to modify the service processing method for the management port IP or port. When that is achieved through cross-domain iframe, we want to give specific frame an invisible iframe in the original page, and then a following to a label, the target attribute points to the name attribute of the iframe, the purpose is to click a new tab page will inside the iframe display, rather than open a new browser window. Then we monitor the load inside the iframe page, you can know the new IP or modify the port is successful, which is the twists and turns I started just to monitor the iframe is loaded, the Google browser, continuous loading of about eight unsuccessful url return to the page will be a failure, so if we monitor only the iframe load, at eight, we'll get an error monitoring, because this is not real communication url success, but failed to return their own page browser, so we need to monitor the content of the iframe page loading, unfortunately I have not tried many times to get inside dom, we can only make the page after the successful communication iframe to my current page to send a message, use window.parent.postMessage ( 'ok', '*') transmitted,
window.addEventListener ( 'message', function (e) {if (e.data == 'ok') {}}) monitoring, the relevant code I show below:
//本代码是放在需要做跳转的配置页面的HTML里面
<div style="z-index: 999;display: none;position: absolute;">
<iframe id="login-frame-1" name="login-frame-1"></iframe>
<a href="#" id="login-a" target="login-frame-1">jump</a>
</div>
//vue数据初始化
data() {
return {
loginGetatt:0,
loginReady: false,
cancle_setTimeOut:undefined,
}
},
// 本代码放在页面加载成功后执行，vue放在mounted里面//loginReady 是我们加载成功后状态标签,原始状态需要设置为false，vue在data()里面设置
window.addEventListener('message',function (e) {
console.log(e)
if(e.data=='ok'){
self.loginReady = true
}
})
//这个代码是放在修改IP或者端口的API之前的
setTimeout(function () {
//这个里面可以添加是不是需要跳转的判断逻辑，因为IPV4页面修改ipv6地址是不需要跳转的
//url为用户修改的新的url地址
document.getElementById('login-a').href = url+'/login'
self.loginGet(url)
},3000)
//这个逻辑就是每隔3秒点击a标签，如果判断self.loginReady为true说明新IP的页面加载成功，或者超时直接让当前窗口跳转新URL
loginGet(url){
let self = this
self.loginGetatt++ //self.loginGetatt初始值为0，vue在data()里面设置
self.cancle_setTimeOut=setTimeout(function () {
document.getElementById('login-a').click()
if(self.loginReady||self.loginGetatt>30){\
window.location.href=url
}else{
self.loginGet(url)
}
},3000)
},
//vue销毁此次绑定的setTimeout和监听事件
destroyed(){
let self = this
clearTimeout(this.cancle_setTimeOut);
window.removeEventListener('message',function (e) {
console.log(e)
if(e.data=='ok'){
self.loginReady = true
}
})
},
//这个方法放在新跳转页面的js中，只要加载页面完毕后就会向window发送消息，以此来判断页面在iframe里面加载成功
function checkout_iframe() {
window.parent.postMessage('ok','*')
}
Summary, modify the Apache configuration is inappropriate in this demand, but if we can ensure that the back-end IP modify the speed, which is then continuously transmitted within eight new IP, we use the best binding iframe onload event, because we ever been to a modification in the IP when, even after the back-end modified successfully, Firefox or Google will load the box to intercept the iframe page, so you can not send a success message to the current page, onload event if we use the iframe, we You will be able to judge whether the new page is loaded, but must be within eight or communications, (Firefox does not have this problem)
