父页面刷新跨越子页面，执行子页面js方法

为什么80%的码农都做不了架构师？>>>   

评论中用到了
就是监控地址栏#的变化。
1、新闻页  1.html
function updateCommentIfrsrc(){
var ifr1 = document.getElementById('comment');
var src = ifr1.src;
var arr = src.split('#');
ifr1.src = arr[0]+'#a'+Math.random()
2、评论页
http://2.html#scrollToTheNew

//jquery hashchange插件
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
jQuery(window).hashchange(function(){
    closeFace();
});
}

 

URL中#号后面变化是不会重新请求服务器的。

jQuery(window).hashchange(function(){
    closeFace(); //当地址栏变化时， 可以把评论页的表情关闭。
});

参考资料
：Google Custom Search Engines use a timer to check the hash against a previous value, whilst the child iframe on a seperate domain updates the parent's location hash to contain the size of the iframe document's body. When the timer catches the change, the parent can resize the iframe to match that of the body so that scrollbars aren't displayed.
Something like the following achieves the same:
var  storedHash  =  window . location . hash ;  window . setInterval ( function   ()   {   if   ( window . location . hash  !=  storedHash )   {  storedHash  =  window . location . hash ;  hashChanged ( storedHash );   }   },   100 );   // Google uses 100ms intervals I think, might be lower 
Google Chrome 5, Safari 5, Opera 10.60, Firefox 3.6 and Internet Explorer 8 all support the hashchange event:
if   ( "onhashchange"   in  window )   // does the browser support the hashchange event?  window . onhashchange  =   function   ()   {  hashChanged ( window . location . hash );   } 
and putting it together:
if   ( "onhashchange"   in  window )   {   // event supported?  window . onhashchange  =   function   ()   {  hashChanged ( window . location . hash );   }   }   else   {   // event not supported:   var  storedHash  =  window . location . hash ;  window . setInterval ( function   ()   {   if   ( window . location . hash  !=  storedHash )   {  storedHash  =  window . location . hash ;  hashChanged ( storedHash );   }   },   100 );   } 
jQuery also has a plugin that will check for the hashchange event and provide its own if necessary -http://benalman.com/projects/jquery-hashchange-plugin/.

转载于:https://my.oschina.net/122612475/blog/855687