Chrome Apps <a> tag not working
It's been a few years since I've been working on Chrome apps. I started tinkering with some simple examples to learn a new process. The problem is that I found that using a tag <a>
to change the html page loaded into another html page inside the packaged application would not work. I'm looking for various ways to change the screen to fetch user input (button click, link click, etc.). I looked online and found very little documentation on how to build chrome apps. Most of the examples show how to make a simple "Hello World" and how to publish it. There aren't many extensive tutorials. Just to clarify, this app would be a real chrome app, not a link to some site. all files will be packed using chrome app.
source to share
Chrome apps are meant to be "single page apps" and cannot navigate links by design. <a>
links should open in a regular browser window.
If you want to do "url routing" in your application for changing views, you can just roll your own solution, but you should probably use a framework to help you.
Here are some examples:
- Polymer
- Angular
- Amber
- Meteor
- Trunk
The list is extensive. There are probably many other answers out there that compare each structure.
source to share
The DOM (Document Object Model) representing the content of the Chrome application window is initiated from an HTML file, but from now on you cannot change it by referencing any other file that you expect the navigation to do. ( <a>
elements that navigate to an external browser via the "target = _blank" attribute are fine.)
However, you can change the DOM from your JavaScript at runtime. If you want, set an event handler on the element <a>
and modify the DOM as you see fit. If you want to modify the DOM via HTML (not from a file), you may find the JavaScript method insertAdjacentHTML
useful. In fact, you can get the HTML file from the file, but you have to read that file yourself with the Chrome App File I / O API.
The advice in another answer to using a framework is overkill in my opinion. If you are thinking of a Windows application, Mac application, or any other graphical application, you would never assume that you can simply change the interface to something completely different by referencing an HTML file. Consider that the Chrome app is similar to these technologies in this sense, and you will be on the right track.
source to share