文档介绍：基于iframe的跨域与更新父窗体地址栏的解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
1 需求介绍：
管理平台前端页面需要在当前前端框架结构基础上，在顶级导航中面、虚拟机创建页面和虚拟机详情页面。管理平台给虚拟机模块的设定的路径是：
“/op/opManagement/compute/vm”
这样虚拟机模块下的所有页面使用的都是这个路径。另外在iframe中设定的src地址，指向的是运维平台虚拟机的管理页面。这样在顶级导航中点击“私有网络”，便可跳转到运维平台的管理页面。在该页面，又可从虚拟机管理页面跳转到虚拟机创建页面、虚拟机详情页面，甚至跳转到母机模块的相关页面。从我们管理平台的角度来说是没有问题的，管理提供了一个入口地址，可以正常接入运维平台的页面。运维平台内部页面中还可调整到其他页面，我们就不做管理了。
但是这样简单的实现方式，在体验上存在一个问题：当用户正常进入虚拟机管理页面后，由于可以从页面内容跳转到其他页面，例如跳转到某个详情页面。当用户过一会儿刷新页面后会发现：没有按照预期停留在详情页面，而是又回到了虚拟机管理页面了！
这是因为前面介绍过，无论是虚拟机管理页面、虚拟机创建页面，还是虚拟机详情页面，在管理平台上设定的路由都是“/op/opManagement/compute/vm”，且这个指向的又是虚拟机管理页面，所以无论上次停留在什么页面，再刷新都是会回到虚拟机管理页面。这是根据路由设定的，从技术角度讲没有问题。
但从用户体验上来说，这里的体验会让用户产生不舒服的感觉：明明上次还停留在虚拟机详情页面，怎么我一刷新跑到了其他页面上呢？而且我想把这个详情页面的链接分享给其他同事看看，怎么打开却是虚拟机管理页面呢？我想用浏览器的回退、前进按钮，怎么和我预想的不一样呢？
解决iframe实现刷新页面保持
针对上面的问题，我的解决方法是：第一，每次在iframe内部页面跳转后，获取到iframe内跳转后最新的src值。第二，然后根据这个src值，修改管理平台地址栏的url。下面是具体解决方案：
要监听iframe的src的变化，可使用onload事件：
<iframe src="xxx" onLoad="alert('Test');"></iframe>
src变化，onLoad会被调用。但有一个前提，src和你的父窗口的地址必须是同源的，也就是不能跨域。
但实际上管理平台的页面和运维平台的页面并不是同源的，所以首先要解决的是跨域问题。
解决跨域的方法有很多种，这里由于管理平台的主域是“”，运维平台的主域也是“”，。这里需要管理平台和运维平台一起进行修改：在项目的入口文件中设置：
=””;
这样便解决了跨域的问题。
然后在每次ifrmae内部src变化时，便会调用onLoad()。，获取子窗体的href值，再对父窗体的地址栏做修改。以虚拟机模块的代码为例，由于从虚拟机页面还有可能跳转到母机模块，这里也要考虑到：
如果是在获取到子窗体的src后，