How to load a local web page in javascript

Question

I'm trying to load a local web page executing:

var html = document.open('google.html');
document.documentElement.innerHTML = html;

It loads the page but it's not well formatted and images won't display. How could I load the entire contents?

Thanks

That's not an ajax problem. But a solution could simply be document.location.href=... — Denys Séguret
– Denys Séguret, Commented Jun 20, 2012 at 11:01
I'm sorry but I don't know nothing of ajax, I thought that it was just a combination of javascript, php and xml... I'll try to look up that in google, thanks. — synack
– synack, Commented Jun 20, 2012 at 11:02
@dystroy: yes, that works: the only problem is that it doesn't work for relative paths. In my case, google.html, is in the same directory as the script.js. — synack
– synack, Commented Jun 20, 2012 at 11:07
I'd like to do something like: document.location.href='file://./google.html'; — synack
– synack, Commented Jun 20, 2012 at 11:09

Rich O'Kelly · Accepted Answer · 2012-06-20 11:00:15Z

3

Most likely this is because external resources (images, style sheets, js files etc) are allowed to have relative urls. Any relative urls need to be fully qualified for the page to load properly.

answered Jun 20, 2012 at 11:00

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

synack Over a year ago

+1: that's the problem but still not the solution because this script is going to be used in an add-on and I can't change relative paths for absolute ones...I want it to be the more general as possible

Denys Séguret · Accepted Answer · 2012-06-20 11:10:13Z

2

If you want to replace the content of the page by another one, simply do

document.location.href="http://google.com";

If you want to open a local page named google.html do

document.location.href=document.location.href.splitOnLast('/')[0]+"/google.html";

This will ensure that linked resources can be loaded as the relative paths will be accorded to the location of the page. Don't change the content yourself.

edited Jun 20, 2012 at 11:10

answered Jun 20, 2012 at 11:02

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

5 Comments

synack Over a year ago

I click as answered too soon.. the fact is that it doesn't work because the current url is not the one that points to the script directory

Denys Séguret Over a year ago

you can unaccept it I think. But I don't get your problem. Are you calling this from a script inlined in the body of your calling page ? This should work. The position of your script should not impact this line.

synack Over a year ago

This script is executed when the add-on (a firefox add-on) detects that the user requests www.google.com/index.html. So, it's not executed on the page itself.

Denys Séguret Over a year ago

This should not change anything : the document location is the one of the page, not the one of the script. If you really have a problem, try it with window.location instead of document.location. But we're entering a realm very different from the initial question. I didn't recently do FF extensions and I'm not sure about today's solution to inject scripts in the domain of the pages in FF.

synack Over a year ago

But I need the location of my script, the location of the page is www.google.com ...

Arash M · Accepted Answer · 2023-06-07 09:46:14Z

0

easily just fetch it, and get res as text

var tab = document.getElementById("tab");
function loader(){
    fetch("path-to-file")
          .then(response => response.text())
          .then(text => tab.innerHTML = text);
}

answered Jun 7, 2023 at 9:46

Arash M

1

Collectives™ on Stack Overflow

How to load a local web page in javascript

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related