有时候我们需要刷新页面的时候同时刷新页面中的iframe，如果iframe中有跳转了，刷新就会导致页面回到最初的src，明显这不是我们想要的结果。

为了解决这个问题，我们需要把iframe中的网址存储起来。

存储媒介选择：js变量、url、cookies、localstorage？

由于刷新页面，页面所有的js变量状态都会丢失，所以我们不能用js变量来存储，那就只能通过url、cookies或localstorage来存储了。用cookies和localstorage有一个缺点就是对同个浏览器的所有页面起作用，刷新不应该修改到同浏览器的其他页面。最终选择url。

url存储选择：queryString还是hash？

如果选择queryString，即xxx.html?yourIframeUrl的方式，由于queryString会上送服务器，个人觉得不是很好。

所以选择hash，即xxx.html?#yourIframeUrl的方式。

接下来就是处理iframe的url的存储和读取。

存储时机，iframe中正常跳转，并不会改变iframe的src。iframe也没有src的change事件，不过我们可以通过load的方式触发。注：以下方法不能在跨域情况下使用。

iframe.addEventListener('load', function() {
    var iframeUrl = iframe.contentWindow.location.href;//跨域js访问会报错
    window.location.hash = '#'+encodeURIComponent(iframeUrl);//记得urlencode
    
});

读取时机：在页面加载时触发。

window.addEventListener("load",function(){
       var iframeUrl = decodeURIComponent(window.location.hash.substring(1));//记得urldecode
       iframe.src = iframeUrl;
})

这里只讲解思路。具体比如hash采用key=value方式的字符串解析就没详细写。

假如你需要刷新的时候，iframe不使用缓存，最好是在给iframe设置src的时候，网址后面加上随机数，如 iframe.src = iframeUrl+"?rand="+Math.random(); 实际项目你需要先移除掉iframeUrl中的随机数后再添加。这里也不展开。