I have a browser object in my XUL application, for example:
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window title="Students" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="800px" height="500px"> <groupbox flex="1"> <caption label="Students"/> <browser type="chrome" src="chrome://myapp/content/index.html" flex="1"/> </groupbox> </window>
And index.html:
<!DOCTYPE html> <html> <head> <title>Student page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1>Something wrong with history.replaceState</h1> <script> try{ history.replaceState(null, '', 'chrome://myapp/content/another.html'); }catch(e){ </script> </body> </html>
Error opens:
[Exception ... "The component returns a failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHistory.replaceState]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: chrome: //myapp/content/index.html :: string 11 ": no]
I tried using Angularjs in a browser element, but since it relied on history.replaceState to do what it should do, it fails in the XUL application.
[update]
when setting the type of the browser element to content-primary location.replaceState does not throw an exception.
<browser type="content-primary" src="chrome://myapp/content/index.html" flex="1"/>
[update]
Problem XMLHttpRequest Status returns 0 and Angular checks for if(status... In Firefox, when you open a file from disk, it will still return the status of 200, but not in XUL. This causes the templates to not load.
Change return in isSuccess in Angular source to return (200 <= status && status < 300)||status===0; now loads the template.
[update]
When I click the link, I see that the link like #/students/22 becomes unsafe:chrome://myapp/content/index.html#/students/22 ends in a warning, informing me that the unsafe is not a registered protocol, this is not a problem XUL. To add the chrome: // protocol as trusted in Angular, I did the following in my application.js application:
angular.module('student', []). config(['$routeProvider','$compileProvider', function($routeProvider,$compileProvider) { $compileProvider.urlSanitizationWhitelist(/^\s*(chrome|file):/);
Now it will only open links to chrome://path/file or file://path/file