history.pushState error using fancybox “Failed to execute 'pushState' on 'History': A history ”

问题:

I'm using 'fancy box' and I'm trying to change my url to be
the url of the fancy box, so I try to use History.pushState().
but it makes error
The error:

Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'about:blank' cannot be created in a document with origin 'http://localhost:28587'

My code:

            var _url = window.location.href;             setInterval(function () {                 if (($(".fancybox-iframe").length > 0))                    {                   if(window.location.href != $('.fancybox-iframe').contents().get(0).location.href)                 {                      history.pushState(null, null, $('.fancybox-iframe').contents().get(0).location.href);                 }                    }                 else                  {                   if(window.location.href != _url)                   {                     history.pushState(null,null, _url);                   }                   }              }, 80); 

I'd search it and didn't find an answer, please help me
or Suggest me better solution for doing that.
(I found this:Javascript history.PushState not working? but I didnt understand what wrong in my code from the answer)

Edit:
and another problem is that when i press "back" in browser the url is change but not actually loaded, why??

回答1:

history.pushState has security restrictions and one of them is not to allow application to push cross-origin url-s to history. This obvious behavior and you can read more about it in question that you link to.

Looking at your error message I guess that your origin server is http://localhost:28587. Anyway, answering my comment you say that that you try to push url with origin http://localhost:27477. As you can notice they have different ports and from machine's point of view is definitely different.

I can not recommend you absolutely right way to fix it. It depends on your application logic. First you can use one port to execute your code. Second you can use some kind of proxy (like nginx) configured to listen both ports. Third, you can push relative path (/PerPage/content.php?d=1&f=1) if it is not break your application's logic. Try to google solution acceptable for you.

文章来源: history.pushState error using fancybox “Failed to execute 'pushState' on 'History': A history ”