ОК, привет, я новичок в Stack Overflow (насколько это касается регистрации), но используйте его регулярно, чтобы найти решения. У меня был поиск моей проблемы, и, хотя я нашел несколько статей и вопросов, почти связанных с моей проблемой, никто не ответил на мою точную проблему. Приносим извинения, если вас спросили миллион раз!Окно popstate только срабатывает после двух обратных щелчков, и каждые два
Я довольно новичок в 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>
Мой 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, указанный выше, и он находится в текущее состояние (т.е. не работает). Любая помощь будет принята с благодарностью, ясно, что я делаю что-то неправильно, но я понятия не имею, что это такое.
Заранее благодарен!
RESOLVED! Модифицированный мою loadPageData() функцию следующим образом ...
function loadPageData(urlToOpen) { $('#contentFrame').remove(); var ifr = $('<iframe/>', { id: 'contentFrame', src: '/' + urlToOpen, style: 'height:100px;', load: function() { resizeiFrame(); } }); $('#frameContainer').append(ifr); }
И добавил идентификатор frameContainer в DIV с ней в оригинальном iframe!
Duh! OK Я теперь обнаружил, что проблема в том, что обновление 'src'' iframe' вызывает дополнительную 'pushstate' ... Мне нужно решение, чтобы это не происходило! Я предполагаю, что на самом деле замена 'iframe' будет делать это, но тогда не добавление' iframe' с новым 'src' будет иметь такой же эффект? Могу ли я использовать метод «replacestate» для решения этой проблемы? – Claud