我是一个JavaScript / jQuery的完全初学者,我目前正在努力实现一个目标,而不是从头开始学习。
我有一个动态网页与单独的链接;这些链接不刷新页面,而是刷新客户端的内容。但是,我并不 * 只是 * 想获取和显示页面 * 内容 *,我想用新加载文档的标题替换旧标题(例如,从“MySite|主页到我的网站|关于”)。
JS/jQuery:
$(function() {
if(Modernizr.history){
var newHash = "",
$mainContent = $("#main-content"),
$el;
$("a").click(function() {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href){
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(href + " #guts", document.title, function() {
$mainContent.fadeIn(200);
$("a").removeClass("current");
console.log(href);
$("a[href$="+href+"]").addClass("current");
});
});
}
$(window).bind('popstate', function(){
_link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
HTML:
<header>
<h1>Dynamic Page</h1>
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</header>
<section id="main-content">
<div id="guts">
<p>This is the homepage content</p>
</div>
</section>
使用上面个人调整的third-party code from CSS-Tricks:我已经尝试了在function loadContent(href)
中**添加各种内容(在$myContent
部分下面),例如:
$title.hide().load(href + document.title, function() {
$title.removeclass("current");
console.log(document.title);
$title[href$="document.title"]);
});
和/或
$title
.fadeOut(200, function() {
$title.hide().load(href + newTitle, function() {
newTitle.fadeIn(200);
});
(of这都导致不必要的页面刷新),以及无数的其他尝试(如果这些尝试是骇人听闻的道歉-正如我所说,主要是试图达到一个目标,在这个当前的时间,我想表明,我至少尝试了 * 的东西 *)。
任何帮助或指导都非常感谢!!
**更新:**请注意,此问题已于2018年8月10日更新。我意识到在我的示例尝试中有一个致命的错误,我认为这可能会混淆潜在的响应者(我以前尝试从function loadContent(href)
的mainContent部分加载document.title!).
2条答案
按热度按时间w8biq8rn1#
在不知道
'load'
会返回什么的情况下,我建议如下,这里服务器只发送文本标题:如果你的服务器发送一个完整的HTML页面作为响应,那么你可以使用以下方法:
oknrviil2#
这里有一个简单的方法,解决了动态更改的问题,从外部页面与JavaScript/jQuery的标题?