我的NW中有以下html结构.js应用程序
<div id="nav-header">
<!-- bunch of links -->
</div>
<div id="content"></div>
<div id="footer"></div>
我正在尝试找到一种"动态更改"或"从另一个 html 文件加载"内容div 的方法,当用户单击 #nav-header
中的链接时。我知道在 Web 应用程序中这是使用 ajax 完成的,但我不知道如何在 NW.js桌面应用程序中执行此操作,并且找不到有关如何执行此操作的任何线索。
有人可以帮助我吗?
在网上一样做。您可以使用ajax并调用本地文件,AngularJS将是一个简单的解决方案。
例如:
项目结构:
- 包.json
- 索引.html
- 页1.html
索引.html
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
</head>
<body ng-init="page = 'page1.html'"> <!-- Default page -->
<div id="nav-header">
<nav>
<a ng-click="page = 'page1.html'">Link 1</a>
<a ng-click="page = 'page2.html'">Link 2</a>
<a ng-click="page = 'page3.html'">Link 3</a>
</nav>
</div>
<div id="content" ng-include="page"></div>
<div id="footer"></div>
</body>
</html>
页1.html
<div>Hello World</div>
当然,如果你打算使用angular,我建议你使用像Angular UI路由器这样的路由器。但正如你所看到的,你可以用你知道的任何其他技术来做到这一点,NW.js仍然是引擎盖下的镀铬。