假设我有一个链接,比如http://www.example.com/index.html#xyz
。当我在浏览器中使用www.example.com/index.html
打开它时效果很好,但是当我在同一页面上有一个定位#xyz
的链接时,它会通过ajax加载一个新的data-role=content
页面。
现在我的查询是,如果我直接访问与http://www.example.com/index.html#xyz
相同的网址,则会加载www.example.com/index.html
而不是特定的#xyz
页面。
有没有办法让这项工作?
注意:#xyz
页面内容是动态加载的。
答案 0 :(得分:0)
您可以尝试将rel="external"
添加到您的链接,然后就可以了。
示例:强>
假设您有2个HTML文件:index.html
和page.html
,page.html
包含2个jQuery Mobile网页:#p1
和#p2
。< / p>
现在,假设您想通过点击链接#p2
从index.html
访问<a>
。
您需要在链接中添加rel="external"
,如下所示:
<a href="page.html#p2" rel="external">GO TO PAGE 2 !</a>
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<h1>INDEX.HTML</h1>
<!-- YOUR LINK TO ACCESS #P2 IN PAGE.HTML -->
<a href="page.html#p2" rel="external">GO TO PAGE 2 "#P2" !</a>
</div>
</div>
</body>
</html>
page.html
:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- PAGE 1 #P1 -->
<div data-role="page" id="p1">
<div data-role="content">
<h1>PAGE 1</h1>
</div>
</div>
<!-- PAGE 2 #P2 -->
<div data-role="page" id="p2">
<div data-role="content">
<h1>PAGE 2</h1>
</div>
</div>
</body>
</html>