admin管理员组

文章数量:1289383

I'm using window.history.replaceState() to change the query string of a HTML file that was accessed using file:///C:/...

This used to work in Chrome, Internet Explorer and FireFox, but no longer works in Chrome. Not sure when it stopped working. I have Chrome 45.0.2454.85. It still works in the other 2 browsers.

I am getting:

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/Michael/Desktop/test.html?Q=NewQueryString' cannot be created in a document with origin 'null'.

Sorry, but this doesn't work in any hosted fiddle. You can copy the code to a local HTML file to see it for yourself:

<html>
<body>
<button onclick="clickme()">Click me</button>
<script>
function clickme() {
    window.history.replaceState({ "html": undefined, "pageTitle": "NewTitle"}, "", "?Q=NewQueryString");
}
</script>
</body>
</html>

Obviously I could host this on a server but was trying to keep simple. This is a simple scrum board that we are using hosted by Git. It hits a 3rd party web service to get the data. Any ideas on working around the error.

I'm using window.history.replaceState() to change the query string of a HTML file that was accessed using file:///C:/...

This used to work in Chrome, Internet Explorer and FireFox, but no longer works in Chrome. Not sure when it stopped working. I have Chrome 45.0.2454.85. It still works in the other 2 browsers.

I am getting:

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/Michael/Desktop/test.html?Q=NewQueryString' cannot be created in a document with origin 'null'.

Sorry, but this doesn't work in any hosted fiddle. You can copy the code to a local HTML file to see it for yourself:

<html>
<body>
<button onclick="clickme()">Click me</button>
<script>
function clickme() {
    window.history.replaceState({ "html": undefined, "pageTitle": "NewTitle"}, "", "?Q=NewQueryString");
}
</script>
</body>
</html>

Obviously I could host this on a server but was trying to keep simple. This is a simple scrum board that we are using hosted by Git. It hits a 3rd party web service to get the data. Any ideas on working around the error.

  • javascript
  • google-chrome
Share Improve this question asked Sep 4, 2015 at 12:52 MikeMike 3454 silver badges20 bronze badges 3
  • what version , because for me thats working – Dimag Kharab Commented Sep 4, 2015 at 12:57
  • 1 Chrome 45.0.2454.85 not working for me. – Mike Commented Sep 4, 2015 at 13:57
  • This is messed up. I sketch out all my apps as local HTML files in Chrome. Sad to see this no longer works due to jQuery Mobile requiring replaceState(). – Mark Boulder Commented Sep 4, 2015 at 22:14
Add a ment  | 

3 Answers 3

Reset to default 4

It stopped working on Chrome 45. Here I filled an issue on code.google: https://code.google./p/chromium/issues/detail?id=529313

Setting the --allow-file-access-from-files is a good solution if you do just need to run it on your own puter.

I had the same problem. As a workaround, I started Chrome with --allow-file-access-from-files flag.

But think this is not the best solution.

Below is an example of how I'm running:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=file: ///C:/APP/index.html --allow-file-access-from-files

If someone find a better solution, please let us know.

The Chromium team have marked this as WontFix, and instead remend against using file:// URLs in your application.

You have two options:

Option A: Use hash instead.

You are still able to use window.history.replaceState/pushState to modify the hash ponent of file:// URLs.

To set some hash params:

window.history.replaceState(null, "", "#?a=param1&b=param2);

To read some hash params:

const hashString = window.location.hash;
const queryString = hashString.startsWith("#?") ? hashString.substring(2) : hashString;
const queryParams = new URLSearchParams(queryString);

To clear hash params:

// Clear query string
window.history.replaceState(null, "", window.location.pathname + window.location.search);

Option B: Use document.location.href as legacy behaviour

It is possible instead update the document.location.href as a hacky solution for those file URLs. This will reload the page, but depending on the application this may still be viable.

When not a file:// URL you can still continue to use the typical window.history.replaceState/pushState functionality.

For example:

const queryString = "a=param1&b=param2"

// Set query string
if (window.location.protocol === "file:") {
  // If application is opened as a file (not served over HTTP), we cannot use `window.history`.
  const newLocation = `${window.location.protocol}//${window.location.pathname}?${queryString}`;
  if (document.location.href !== newLocation) {
    document.location.href = newLocation;
  }
} else {
  window.history.replaceState(null, "", `/?${queryString}`);
}

本文标签： javascriptHistory replaceState no longer working in Chrome for local fileStack Overflow

版权声明：本文标题：javascript - History replaceState no longer working in Chrome for local file - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741457059a2379816.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。