External HTML in div without server

Asked

Viewed 327 times

0

I own a page Index.html is a series of other html pages. I need to make sure that by clicking on a link the specific document appears in a div. In detail, I can’t use PHP include because I can’t mount a server for various reasons. I can’t use load because it only works on the server. Can anyone give me an idea of how to perform this miracle? I plan to use Electron to envelop everything, but by testing the load did not work on Electron tbm. Is there any way jquery load works when running HTML in the browser or some other way to make an external HTML be written directly into the gift without serverside?

javascript html5 dom

  • And where this page is hosted ?

  • No c: from an ordinary computer. I think about sharing to other computers a Index shortcut

  • When we talk about jquery we are referring to client-side then I don’t understand why load() of jquery would not work.

3 answers

1

It would not be better to make a simple ajax via javascript giving request of the html file, and in this request you play the content where vc vc need?

You can also create these html files only with the necessary content without the body and head tags, only what really matters...

BUT...

Within its various limitations, you can use English or some other javascript framework to achieve what you need in a much more efficient way than this.

Jquery is nice for simple things in SPA, but if you are doing something more elaborate, better some framework behind.

  • The problem is the limitation. Not having a server to host. HTML I am putting only the necessary tava, without HTML, Head and body

1


Something I think might work.

I’m assuming you have a main div with "main-content" ID where you will upload the other pages.

function load_home() {
   document.querySelector("#main-content").innerHTML='<object type="text/html" data="PAGINA-HOME.html" ></object>';
}

When user click on a given button or link you call this function

If you have a server that runs only HTML and needs route management, you can also use angular so you have exactly what you described.

A main page where only snippets of codes are changed.

See this simple example of w3c.

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing

  • Opa! Excellent. Poxa Brigadeo. I will test here

  • But know that this is not something that should be done in an application that goes into production. If it’s something just for fun OK, but a real website would never do that.

  • In a local application the ideal would be to put on an Apache server. Correct?

  • Yes, you can install shaman and put your website to run on it. Even with xampp you will have Mysql and Php and you can use include and do it the right way. However, the site will only be accessible to people from the same network. You can even make the site visible to everyone but it’s another story a setup like this, and I wouldn’t recommend it on a home machine.

  • I get it. It’s just a breaking branch of tests for now. Thank you so much for your help

1

Save a JS file or include it in the index, with the content below:

function abre(arquivo,alvo){ 
var xmlHttp; try{ xmlHttp=new XMLHttpRequest(); }
catch (e){ try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e){ alert("Seu navegador não suporta AJAX. Atualize-o"); return false; } } }
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState == 1) { document.getElementById(alvo).innerHTML = "<img src='images/loading.gif' align='absmiddle'>"; }
if(xmlHttp.readyState == 4) { document.getElementById(alvo).innerHTML = xmlHttp.responseText; } }
xmlHttp.open("GET",arquivo,true); xmlHttp.send(null);  };

Then just put it on the link: 

<a href="javascript:abre('sobre.html','divEscolhida');">Sobre a Empresa</a>

<div id="divEscolhida"></div>

  • Note that you have a: <img src='images/loading.gif' align='absmiddle'> put a loading gif inside a images folder and you’re done.

Browser other questions tagged javascript html5 dom

You are not signed in. Login or sign up in order to post.