后退按钮重定向脚本

Posted 2023-02-24

【中文标题】后退按钮重定向脚本

【英文标题】：Back button redirect script

【发布时间】：2015-09-08 11:59:06

【问题描述】：

我正在尝试开发一个 javascript 代码，当用户单击网页的后退按钮时，它可以被重定向到另一个 URL。

我找到了这几行代码，但我想知道是否有更简洁、更有效的方法：

var bajb_backdetect=Version:'1.0.0',Description:'Back Button Detection',Browser:IE:!!(window.attachEvent&amp;&amp;!window.opera),Safari:navigator.userAgent.indexOf('Apple')&gt;-1,Opera:!!window.opera,FrameLoaded:0,FrameTry:0,FrameTimeout:null,OnBack:function()alert('Back Button Clicked'),BAJBFrame:function()var BAJBOnBack=document.getElementById('BAJBOnBack');if(bajb_backdetect.FrameLoaded&gt;1)if(bajb_backdetect.FrameLoaded==2)bajb_backdetect.OnBack();bajb_backdetect.FrameLoaded++;if(bajb_backdetect.FrameLoaded==1)if(bajb_backdetect.Browser.IE)bajb_backdetect.SetupFrames()elsebajb_backdetect.FrameTimeout=setTimeout("bajb_backdetect.SetupFrames();",700),SetupFrames:function()clearTimeout(bajb_backdetect.FrameTimeout);var BBiFrame=document.getElementById('BAJBOnBack');var checkVar=BBiFrame.src.substr(-11,11);if(bajb_backdetect.FrameLoaded==1&amp;&amp;checkVar!="HistoryLoad")BBiFrame.src="blank.html?HistoryLoad"elseif(bajb_backdetect.FrameTry&lt;2&amp;&amp;checkVar!="HistoryLoad")bajb_backdetect.FrameTry++;bajb_backdetect.FrameTimeout=setTimeout("bajb_backdetect.SetupFrames();",700),SafariHash:'false',Safari:function()if(bajb_backdetect.SafariHash=='false')if(window.location.hash=='#b')bajb_backdetect.SafariHash='true'elsewindow.location.hash='#b'setTimeout("bajb_backdetect.Safari();",100)else if(bajb_backdetect.SafariHash=='true')if(window.location.hash=='')bajb_backdetect.SafariHash='back';bajb_backdetect.OnBack();elsesetTimeout("bajb_backdetect.Safari();",100),Initialise:function()if(bajb_backdetect.Browser.Safari)setTimeout("bajb_backdetect.Safari();",600)elsedocument.write('<iframe id="BAJBOnBack"   style="display: none;" src="blank.html" onunload="alert(\'de\')" onload="bajb_backdetect.BAJBFrame();"></iframe>');bajb_backdetect.Initialise();

这就是您在 HTML 文档中使用它的方式：

<script type="text/javascript" src="js/backfix.min.js"></script>
<script type="text/javascript">// <![CDATA[
bajb_backdetect.OnBack = function()
    document.location.href = 'http://google.com'; //Change the url here with your desired URL

// ]]></script>

【参考方案1】：

如果你想使用浏览器的后退按钮，我会将每个页面更改推送到 History Api

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history http://www.sitepoint.com/javascript-history-pushstate/

您需要做的是，当用户浏览您的页面时，每当他们做一些您认为应该将其放入您使用的历史记录的事情时

history.pushState(, 'Title: Google', 'http://www.google.com/');

现在，当用户单击返回按钮时，前一页将是 google.com，但我确定您希望它成为网页上的某个端点。

【讨论】：

Failed to execute 'replaceState' on 'History': A history state object with URL 'https://google.com/' cannot be created in a document with origin 'http://xxxxxxx

【参考方案2】：

我已经找到了答案，以防其他人正在寻找它。

使用以下代码创建一个名为 history-stealer.js 的单独文件：

(function(window, location) 
history.replaceState(null, document.title, location.pathname+"#!/history");
history.pushState(null, document.title, location.pathname);

window.addEventListener("popstate", function() 
  if(location.hash === "#!/history") 
    history.replaceState(null, document.title, location.pathname);
    setTimeout(function()
      location.replace("http://www.url.com");
    ,10);
  
, false);
(window, location));

然后将此代码包含在您的 HTML 文件中：

<script src="history-stealer.js"></script>

这样它就会调用 history-stealer.js 文件

【讨论】：

对我不起作用。创建了这个文件。包含指向 HTML 文件的链接，并确保浏览器获取该文件，按下后退按钮但它没有重定向。

我错了，它确实有效，唯一的问题是浏览器使用的是网页的缓存版本。清除缓存，脚本运行。