我遇到了两个带* .js
的html文件之间连接的问题我得到index.html我得到了一个formular.php而且我得到了一个backbutton.js
我想要做的是:如果我发送我的fomular via按钮im调用formular.php将文本写入我的MySQL数据库。如果有人忘记输入电子邮件地址,我会收到一个错误页面,其中有一个按钮"返回"。有了那个按钮,我想回到公式页面。
我的问题是我的index.html是一个包含3个不同div的页面,其中包含ids page1,page2,page3。当用户完成测验时,页面会自动从page1更改为page2
function checkplayer() {
if (player1 == true && player2 == true && player3 == true && player4 == true) {
setTimeout(function() {
$(document).ready(function() {
$("#page1").fadeOut(1000);
setTimeout(function() {
$("#page2").fadeIn(1000);
}, 1500);
});
}, 1000);
}
所以我的整个页面都是1页,有3个不同的div,它们已经淡入淡出。
如果我使用formular.html中的后退按钮history.back();
我登陆page1 div。但我需要使用公式来获取page3 div。如果我重新加载页面也会发生同样的情况我总是登陆page1,因为我的index.html以page1开头,page2和page3设置为display: none
。这就是为什么我猜回历史不适用于这种情况,因为我退后一步意味着新加载的index.html
我尝试做的是backbutton.js
function backButton() {
jQuery("#errorpage").fadeOut(0);
jQuery("#page3").fadeIn(0);
}
错误消失了,但是page3没有淡入,因为backbutton.js不知道page3 div所在的index.html。
是否有可能将错误发送到fadeout并使index.html page3淡入?是否有可能导入" index.html page3 div进入backbutton.js?
任何人都知道如何在这三个文件之间建立连接,或者是否有其他方法可以将错误发送到fadeout并将page3 div转换为fadein?
感谢任何帮助。谢谢
答案 0 :(得分:2)
您可以将哈希传递给网址:
function backButton() {
jQuery("#errorpage").fadeOut(0);
window.location = "index.html#page3";
}
然后检查原始页面上的相同哈希,如下所示:
function checkHash() {
$(document).ready(function() {
if (window.location.hash === "#page3") {
$("#page3").fadeIn(1000);
}
});
}
另外,如果没有输入电子邮件地址,请考虑不允许用户在第一时间前进。
答案 1 :(得分:1)
考虑使用哈希(#)来识别3个不同的页面;即,当从第1页切换到第2页时,通过将URl更改为'YOUR_PHP_PAGE.php#page2'等信号来表示它。这样,浏览器历史记录(以及重新加载)应该能够正确处理它。在页面-JG中监听hash-changed-event并显示相应的div。 (请注意,通过location.href = ...更改哈希值#page2不会重新加载页面,但会触发事件。) 关于错误页面(淡入/淡出),您可以将其放在同一页面上。然后使用ajax将数据发布回服务器,而不是加载新页面..
答案 2 :(得分:1)
您可以在div中使用哈希项作为id,并且可以通过添加这样的哈希(index.html#page2)来调用特定div。这直接落到id而不是重新加载整个页面。同时我们可以使用淡入淡出使用jquery和ajax脚本来发布数据
答案 3 :(得分:0)
使用锚点指导用户是很常见的。使用HTML5,您可以通过History.js使用历史/状态API。
我使用history.js插件重写了你的代码。阅读示例代码中的注释以查看发生的情况。将page2finished()和throw_error()函数替换为当前现有的告知用户何时完成第2页以及何时应显示错误的方法。包含这些内容是为了向您展示此代码应采用的流程。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/history.js"></script>
$(document).ready( function() {
var player1,
player2,
player3,
player4,
errorpage = $("#errorpage");
//Initialize the history.js script by binding it to the window object.
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
});
//Add page 1 to the browser history and load the first anchor.
History.pushState({state:1}, "Page 1", "?page=1");
//Make sure that the other elements are hidden when the user first loads the page.
$("#page2, #page3, #errorpage").hide();
function checkplayer() {
if (player1 && player2 && player3 && player4) {
$("#page1").fadeOut(1000, function() {
$("#page2").fadeIn(1000, function() {
//Add page 2 to the browser history and load the second anchor.
History.pushState({state:2}, "Page 2", "?page=2");
});
});
}
}
//After the user is done with page 2 throw them to page 3 by adding it to the browser history then loading the third anchor.
function page2finished() {
$("#page2").fadeOut(1000, function() {
//Add page 3 to the browser history and load the third anchor.
$("#page3").fadeIn(1000, function() {
History.pushState({state:3}, "Page 3", "?page=3");
});
});
}
//Something went wrong! Show the #errorpage element.
function throw_error(text) {
//Put the error text into the element and show it to the user.
errorpage.text(text);
//Hide the main pages.
$("#page1, #page2, #page3").hide();
//Add the error to the browser history and show that anchor.
errorpage.show();
History.pushState({state:3}, "Error", "?page=errorpage");
}
//The user clicked the back button
function backButton() {
errorpage.hide();
//We saved '3' linking to page 3 so tell history.js to go there.
History.back(3);
}
});