个人中心
gpt4 book ai didi

javascript - 具有iframe的历史记录对象后退按钮

转载 作者：行者123 更新时间：2023-11-28 00:11:54 31 4
gpt4 key购买 nike

我对javascript/html5中的history对象和iframes有问题。我写了一个简单的项目来描述我的问题：
http://dktest.evermight.com/
这是一个带有iframe和next按钮的页面。每次单击“下一步”，它都会加载一个带有递增计数器的新页面。但是，单击“浏览器后退”按钮并不能完成我希望它执行的操作。让我把这篇文章分成以下几个部分来解释这个问题：
我想达到的目标
当前项目中的意外结果
发布我所有的代码
一。我想达到的目标
我希望用户：
打开新窗口并转到http://dktest.evermight.com/
单击“下一页”并看到一个红色框淡入，要查看iframe和浏览器地址栏中都显示的urlhttp://dktest.evermight.com/count.html?count=0
再次单击下一页，并在iframe和浏览器的地址栏中查看http://dktest.evermight.com/count.html?count=1
单击浏览器的后退按钮一次，然后在iframe和浏览器的地址栏中都可以看到http://dktest.evermight.com/count.html?count=0
单击浏览器的后退按钮一次，然后在浏览器的地址栏中看到http://dktest.evermight.com/，并看到红色框淡出
2。当前项目中的意外结果
我的代码位于http://dktest.evermight.com/时，它当前未正确执行步骤4和步骤5。当我执行步骤4时，iframe显示http://dktest.evermight.com/count.html?count=0，但浏览器地址栏显示http://dktest.evermight.com/count.html?count=1。我必须再次按下浏览器的后退按钮，使浏览器地址栏显示http://dktest.evermight.com/count.html?count=0。当我执行第5步时，红色框会消失，这很好，但是地址栏仍然显示http://dktest.evermight.com/count.html?count=0。我必须再按一次后退键才能使地址栏显示http://dktest.evermight.com/。
三。发布我所有的代码
我的代码很直截了当。您可以在http://dktest.evermight.com/上查看源代码。为了方便，我也会在这里发帖。
index.html索引

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript">
var count=0;
function clicknext()
{
   $('#container').fadeIn();
   $('#iframe').attr('src','count.html?count='+count.toString());
   $('html title').html(count);
   history.pushState({blahblah:'whatgoeshere?'},'i dont know what goes here either','http://dktest.evermight.com/count.html?count='+count);
   count++;
}
function hideContainer()
{
   $('#container').fadeOut();
      var closeurl = 'close.html';
      if($('#iframe').attr('src') != closeurl )
      $('#iframe').attr('src', closeurl);

}

$(document).ready(function(){
   hideContainer();
});
   </script>
</head>
<body>
<div id="container" style="display:none; background:red;">


        <!-- IMPORTANT 
            When DOM first created, the iframe.src MUST BE initialize.html
            I have some code that I need to fire on that page before the rest 
            of this document starts
        -->
        <iframe id="iframe" src="initialize.html"></iframe>
</div>
        <input type="button" onclick="clicknext()"; value="next page" />
</body>
</html>

关闭.html 
<!DOCTYPE html>
<html>
        <script type="text/javascript">
                parent.hideContainer();
        </script>
</html>

count.html网站
我不能修改count.html的内容。在我的实际项目中，count.html实际上是一个youtube视频，它位于一个我无法直接访问的服务器上。 
<html>
        <body>Youtube video at url <script type="text/javascript">document.write(location.href);</script></body>
</html>

初始化.html 
Perform application specific functionality

是否有人可以更正我的代码以获得第1节中描述的步骤4和步骤5的结果？
更新
好吧，基于我正在做的一些实验，我对这个问题有了更多的理解。
实验一：我试着换线： 
$('#iframe').attr('src','count.html?count='+count.toString());

到 
$('#iframe')[0].contentWindow.location.replace('count.html?count='+count.toString());

这使我能够正确地执行步骤4。显然，contentWindow.location.replace（）不会在历史对象中创建条目。但是，这导致了与count.html内容相关的一些其他问题，count.html实际上是youtube/vimeo内容的一个页面。youtube/vimeo内容要求通过attr（'src'）方法而不是.contentWindow.location.replace（）加载信息。所以，也许解决方案是找到一种方法，使attr（'src'）不使用history对象创建条目？
实验2我尝试的另一个可能的解决方案是更改attr（'src'）和history.pushState（）调用的顺序。我尝试先调用attr（'src'），然后调用history.pushState（）second，再调用history.pushState（），最后调用attr（'src'）。但在这两种情况下，当我按下浏览器的后退按钮时，首先返回的是iframe内容。因此，我无法捕捉通过history对象传递给自己一条消息来执行“双重备份”，因为history对象中的信息在事件序列的最后才可用。
实验3我还尝试使用History.js。它没能解决我上面的问题。据我所知，它的工作方式和普通的历史对象完全一样。
还有什么我可以试试的吗？或者建议修改上面的实验？我将作为一个单独的堆栈溢出问题进一步探讨实验1。

最佳答案

我创建一个新的iframe并在加载新内容时销毁iframe。这就解决了历史问题。

关于javascript - 具有iframe的历史记录对象后退按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14722089/

31 4 0
文章推荐： javascript - jQuery 替换 html 文档中的开始和结束标记
文章推荐： c++ - 使用 Make 使用 g++ 编译时出现 "Bad command or file name"错误
文章推荐： C++ 使用 HRESULT 返回 S_OK
文章推荐： jquery - 是否有复选框更改状态的事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com