Its a bit hard to understand what exactly are you trying to trying to do without complete HTML markup or full details.
Here is what I have tried and I cannot repro the problem:
- Created Split App template
- In default.html, the PageControlNavigator navigates to testPage.html.
- TestPage.html is a "Page Control" which contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testPage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="testPage.css" rel="stylesheet" />
<script src="testPage.js"></script>
</head>
<body>
<div class="testPage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to testPage</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<p>Content goes here.</p>
<!-- A hyperlink to page2.html. -->
<p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
<div id="controlDiv"></div>
</section>
</div>
</body>
</html>
- Then I modify TestPage.js with the following Javascript:
ready: function (element, options) {
// TODO: Initialize the page here.
var htmlControl = new WinJS.UI.HtmlControl(document.getElementById("controlDiv"), { uri: '/pages/samplePageControl/samplePageControl.html' });
WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
},
linkClickEventHandler: function (eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
- I also create a samplePageControl.html page by creating a folder called samplePageControl under pages and creating a HTML file with this:
<!-- Include this file in your project.
<!-- samplePageControl.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>samplePageControl</title>
</head>
<body>
<div class="samplePageControl">
<p class="samplePageControl-text"><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
<button class="samplePageControl-button" style="background-color: green">Click</button></p>
<p>Page controls can also contain WinJS controls. They are activated automatically, like the ToggleSwitch below.</p>
<div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
</div>
</body>
</html>
- I have also created another folder called "page2" and created a Page Control named Page2.html (and the corresponding cs & js files)
- When I run the app, I see testPage.html show a link as well as the HTML from the samplePageControl.html.
- When I click the link, I get navigated to Page2.html and clicking back button on Page2.html displays the testPage.html without any errors.
Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz
