使用index.html时无法从DOM卸载页面 [英] Pages not being unloaded from DOM when using index.html
问题描述
我有两个非常简单的页面，如下所示.如果我浏览到"mysite.com/"，则网络服务器照常返回"index.html"内容.如果然后单击"page2"链接，jquery mobile将第二页加载到DOM中，但是不会从DOM中卸载第一页，尽管它在视图中是隐藏的(display:none). .
我现在在DOM中有2个<div data-role="page">元素，在屏幕上仅可见page2页面.如果然后单击page2上的索引"链接，jquery mobile将从DOM卸载page2，并将index.html页面加载到新的DOM元素中.我现在在DOM中有两个<div id="index">实例，这显然是不正确的！
这是怎么回事?我以为我会在将其报告为错误之前先在这里询问，但似乎这是一个非常简单的示例，完全被破坏了！
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<a href="page2.html">Page2</a>
<p>index page</p>
</div>
</body>
</html>
page2.html
<html>
<body>
<div data-role="page" id="page-2">
<a href="index.html">Index</a>
<p>Page 2</p>
</div>
</body>
</html>
我发现了一个page2.html链接到而不是"index.html"的变通办法，它可以防止第二次重复加载，但是仍然总是将加载的原始页面始终保存在DOM中，这似乎是错误的.
这是一个已知问题 https://github.com/jquery/jquery-mobile/issues/4050 -尽管在发布此问题之前进行了广泛的搜索，但我还是没有找到它.不过，我可能会针对他们的文档提出一个错误报告，因为这是IMO的意外行为.
这是jQuery Mobile的默认行为，第一个登录页面始终保存在DOM中.它只会删除未缓存data-dom-cache="true"的外部页面.在DOM中，您将始终有两个页面，分别是着陆页和活动的外部页面.
尽管如此，如果您希望在导航到另一个页面后删除着陆页，请在着陆页的页面div中添加data-external-page="true".创建pagecreate后，将其标记为删除.page("bindRemove").这是jQuery Mobile删除外部页面的方式.
注意，只要不删除.page()小部件并将其替换为.pagecontainer()小部件，此修补程序将起作用.
<div data-role="page" id="pageID" data-external-page="true">
$(document).on("pagecreate", "#pageID", function (e) {
$(e.target).page("bindRemove");
});
I have two very simple pages as below. If I browse to "mysite.com/" the webserver returns the "index.html" content, as is normal. If I then click the "page2" link, jquery mobile loads the 2nd page into the DOM, but doesn't unload the first page from the DOM, although it is hidden (display:none) from view.
I now have 2 <div data-role="page"> elements in the DOM, with only page2 page visible on screen. If I then click the "index" link on page2, jquery mobile unloads page2 from the DOM, and loads the index.html page into a new DOM element. I now have two instances of <div id="index"> in the DOM which is obviously incorrect!
What is going on? I thought I'd ask on here before reporting it as a bug but it seems like a very simple example that is completely broken!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<a href="page2.html">Page2</a>
<p>index page</p>
</div>
</body>
</html>
page2.html
<html>
<body>
<div data-role="page" id="page-2">
<a href="index.html">Index</a>
<p>Page 2</p>
</div>
</body>
</html>
EDIT: I found a workaround of page2.html linking to rather than "index.html", which prevents the 2nd duplicate loading, but it still seems wrong that the original page loaded is always kept in the DOM.
EDIT 2: This is a known issue https://github.com/jquery/jquery-mobile/issues/4050 - I just didn't manage to find it despite extensive googling before posting this question. I might raise a bug report against their documentation though, because it is highly unexpected behaviour IMO.
This is the default behavior of jQuery Mobile, first landing page is always kept in DOM. It only removes external pages which aren't cached data-dom-cache="true". You will always have two pages in DOM, landing page and active external page.
Nevertheless, if you wish to remove landing page once you navigate to another page, add data-external-page="true" to page div of the landing page. Once it's created pagecreate, flag it for removal .page("bindRemove"). This is the way jQuery Mobile removes external pages.
Note that is fix will work as long as .page() widget isn't removed and replaced by .pagecontainer() widget.
<div data-role="page" id="pageID" data-external-page="true">
$(document).on("pagecreate", "#pageID", function (e) {
$(e.target).page("bindRemove");
});
这篇关于使用index.html时无法从DOM卸载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
