窗口popstate仅在两次反向点击后触发,并且每两次触发一次
window popstate only being triggered after 2 back clicks, and every two
好的,大家好,我是Stack Overflow的新手(就注册而言),但经常使用它来寻找解决方案。我已经搜索了我的问题,虽然我找到了几篇几乎与我的问题有关的文章和问题,但没有一篇真正回答我的确切问题。所以,如果这个问题已经被问了一百万次,我很抱歉!
我是JQuery的新手,但总体上对JavaScript有一些经验。我对history.pushstate和history.popstate方法完全陌生,我正试图在我的新网站上实现这些方法。我不是在使用ajax加载内容,我是在iframe中加载内容,但同样的原则也适用,我需要相应地更新页面URL,并能够在浏览器中来回切换。
请在你的回答中对我温和一点,而我相当有能力,正如你从我的代码中看到的那样,我并没有太先进!
好的,我已经成功地实现了pushstate,页面加载似乎工作得很好(示例在这里。。。http://beta.casafondaradio.com),但当我单击浏览器后退按钮时,它并没有达到所需的效果。也就是说,我似乎必须点击两次才能启动popstate函数。我搞不清楚我做错了什么。
主函数是通过相关链接上的onclick属性触发的。我知道有一种更优雅的方法可以做到这一点,但我只是想让它对我来说简单易读!
我的链接(在ASP.NET中)的格式如下:
<li runat="server" data="home" id="liHome" class="menuList"><asp:HyperLink ID="hlHome" onclick="return pageLoader(this);" data="home" CssClass="menuLink" runat="server" ToolTip="Home | CasafondaRadio.com" NavigateUrl="~/"><i class="fa fa-home" aria-hidden="true"></i> HOME</asp:HyperLink></li>
<li runat="server" data="schedule" id="liSched" class="menuList"><asp:HyperLink ID="hlSched" onclick="return pageLoader(this);" data="schedule" CssClass="menuLink" runat="server" ToolTip="Schedule | CasafondaRadio.com" NavigateUrl="~/schedule.aspx"><i class="fa fa-clock-o" aria-hidden="true"></i> SCHEDULE</asp:HyperLink></li>
<li runat="server" data="events" id="liEvent" class="menuList"><asp:HyperLink ID="hlEvent" onclick="return pageLoader(this);" data="events" CssClass="menuLink" runat="server" ToolTip="Events | CasafondaRadio.com" NavigateUrl="~/events.aspx"><i class="fa fa-star" aria-hidden="true"></i> EVENTS</asp:HyperLink></li>
<li runat="server" data="residentdjs" id="liDJs" class="menuList"><asp:HyperLink ID="hlDJs" onclick="return pageLoader(this);" data="residentdjs" CssClass="menuLink" runat="server" ToolTip="Resident DJs | CasafondaRadio.com" NavigateUrl="~/residentdjs.aspx"><i class="fa fa-headphones" aria-hidden="true"></i> DJS</asp:HyperLink></li>
<li runat="server" data="about" id="liAbout" class="menuList"><asp:HyperLink ID="hlAbout" onclick="return pageLoader(this);" data="about" CssClass="menuLink" runat="server" ToolTip="About | CasafondaRadio.com" NavigateUrl="~/about.aspx"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</asp:HyperLink></li>
<li runat="server" data="contact" id="liCont" class="menuList"><asp:HyperLink ID="hlCont" onclick="return pageLoader(this);" data="contact" CssClass="menuLink" runat="server" ToolTip="Contact | CasafondaRadio.com" NavigateUrl="~/contact.aspx"><i class="fa fa-envelope" aria-hidden="true"></i> CONTACT</asp:HyperLink></li>
<li runat="server" data="webplayers" id="liPlay" class="menuList"><asp:HyperLink ID="hlPlay" onclick="return pageLoader(this);" data="webplayers" CssClass="menuLink" runat="server" ToolTip="Web Players | CasafondaRadio.com" NavigateUrl="~/webplayers.aspx"><i class="fa fa-cog" aria-hidden="true"></i> PLAYERS</asp:HyperLink></li>
<iframe id="contentFrame" frameborder="0" style="height:100px;" scrolling="no" src='<asp:Literal ID="mainFrameSource" runat="server"></asp:Literal>'></iframe>
我头部分的Javascript代码是…
<script type="text/javascript">
function resetiFrame(obj) {
$('#contentFrame').css("height", "100px");
}
function resizeiFrame(obj) {
if ($('#contentFrame').attr('src') != '') {
var dochgt = $(obj.contentWindow.document).height();
$('#contentFrame').css("height", dochgt + "px");
}
}
// Page Loader Functions
var pageUrl = "", pageTitle = "", pageRef = "", pageContent = "",
lastPageUrl = "", lastPageTitle = "", lastPageRef = "", lastPageContent = "";
init = function() {
// Do this when a page loads.
// Page initialisation stuff will go here
};
function pageLoader(objLink) {
var data = objLink.getAttribute('data'),
titText = objLink.getAttribute('title'),
url = objLink.getAttribute('href');
// alert('data = ' + data + ''ntitle = ' + titText + ''nurl = ' + url);
lastPageUrl = pageUrl; lastPageTitle = pageTitle; lastPageRef = pageRef; lastPageContent = pageContent;
pageUrl = url; pageRef = data; pageTitle = titText; pageContent = data + "Content.aspx";
historyUpdate(pageRef, pageTitle, pageUrl);
loadPageData(pageContent);
addActiveClass(data);
return false;
}
function historyUpdate(data, title, url) {
window.history.pushState(data, title, url);
}
function loadPageData(urlToOpen) {
$("#contentFrame").attr('src', urlToOpen);
init();
}
function addActiveClass(data) {
$('#list li').removeClass('active');
$('.menuList').filter('[data="' + data + '"]').addClass('active');
}
</script>
我在before-body-close标签中的javascript代码是…
<script type="text/javascript">
theiFrame = document.getElementById("contentFrame");
$('#contentFrame').load(function () {
resetiFrame(theiFrame);
resizeiFrame(theiFrame);
});
$(window).resize(function () {
resetiFrame(theiFrame);
resizeiFrame(theiFrame);
});
$(window).on("popstate", function (e) {
var origState = e.originalEvent.state;
if (origState !== null) {
// Load previous content
alert(origState);
if (origState == lastPageRef) {
alert("is last Page Ref!");
}
} else {
alert('else : ' + e.originalEvent.state);
}
});
init();
</script>
如前所述,我已经将示例上传到上面链接的测试版URL,它处于当前状态(即不工作)。任何帮助都将不胜感激,很明显我做错了什么,但我不知道这是什么。
提前感谢!
已解决修改我的loadPageData()
函数如下。。。
function loadPageData(urlToOpen) {
$('#contentFrame').remove();
var ifr = $('<iframe/>', {
id: 'contentFrame',
src: '/' + urlToOpen,
style: 'height:100px;',
load: function () {
resizeiFrame();
}
});
$('#frameContainer').append(ifr);
}
并在DIV中添加了一个ID frameContainer
,其中包含原始iframe
!
好吧,我解决了。。。问题出在iframe
上,更改src
就是从iframe中推送一个历史条目。因此,第一次点击后退是收回iframe,而不是启动顶部的window
popstate
。我的解决方案是重写iframe
。我已经用我的新代码更新了上面的"问题"。
- 在一次点击中发布到两个表单 JavaScript
- 一次点击,两次'单击'事件已启动
- 变量递增两次而不是一次
- 地图,rails 4.2,javascript,鼠标悬停,只工作一次(或两次).然后在重新加载之后
- JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
- 合并两个Javascript数组,一次合并三个元素
- JS函数只需点击一次即可触发两次
- 如何一次插入两个表?准备好的发言
- Gulp任务似乎运行了两次,而不是一次
- 使用getElementById一次指定两个操作
- 页面上有两个jQuery应用程序,一次只能运行一个
- 使弹性项目一次包装两个
- 滚动时加载更多 滚动速度时一次工作两次
- 一次两个对象的 JQuery 淡入淡出循环
- 一次改变一个盒子的颜色,而不是两个
- Javascript 库,一次包含两个项目
- 一次两个滑动图像
- 如何设置相同的索引两次(一次在每个循环内,另一次在循环外部)
- React和Axios触发两次(一次未定义,一次成功)
- Javascript进度条不更新'在飞行',而是一次一次进程完成