Call page by HREF and load the id of another page in the IFRAME

Question

Call page by HREF and load the id of another page in the IFRAME

Navigation

#1 by (0 votes)

3

Galera, See if this is possible in HTML5 and CSS:

I have 3 files: index.html services.html desc_servicos.html

Note: all files within the same folder.

In the index.html file, there is a link to the services.html page. Within servicos.html there is an Iframe with src for desc_servicos.html. Already in desc_servicos.html there are several sections with their ID's.

You can call the servicos.html page by passing the section ID of the desc_servicos.html file to be loaded in the IFRAME ?

I'm aware of this option and I know it works when it's on the same page, but I do not know when it comes to multiple pages.

<a href="desc_servicos.html#id" target="nome_iframe">Agente</a>

Sorry if the explanation was confusing

html5 css

asked by anonymous 27.04.2018 / 23:54

1 answer

Return string search in table Prevent browser autocomplete in password

score 0 · Accepted Answer

With .html pages, you can do this using JavaScript. You can do this by following the steps below:

Add with the id of the div you will load on href of the index.html link:

<a href="servicos.html#id_da_div">Serviços</a>

2. On the servicos.html page, capture the hash with window.location.hash . But create two iframe s, one without src and the other hidden with display: none with page desc_servicos.html .

Why two iframes being a hidden? What is not hidden will receive the div of the other that is hidden. This is because% hidden% is which will load the iframe page and does not need to appear, because it will be loaded in order to get the% desired%.

It would look like this:

<iframe id="frame" width="500" height="200"></iframe>
<iframe id="frame2" style="display: none;" src="desc_servicos.html"></iframe>

And include the script below (at the end of desc_servicos.html ) of page div :

<script>
var iFrame = document.body.querySelector("#frame");
var iFrame2 = document.body.querySelector("#frame2");
var div_id = window.location.hash;
iFrame2.onload = function(){ // aguarda o iframe2 carregar

   // insere a div no iframe visível
   iFrame.contentDocument.body.innerHTML = iFrame2.contentWindow.document.querySelector(div_id).outerHTML;
   iFrame2.outerHTML = ''; // remove o iframe2 do DOM
}
</script>

In short:

On page body (replace servicos.html with index.html of id_da_div there with id you want to get):

<a href="servicos.html#id_da_div">Serviços</a>

On page div :

<iframe id="frame" width="500" height="200"></iframe>
<iframe id="frame2" style="display: none;" src="desc_servicos.html"></iframe>

<script>
var iFrame = document.body.querySelector("#frame");
var iFrame2 = document.body.querySelector("#frame2");
var div_id = window.location.hash;
iFrame2.onload = function(){ // aguarda o iframe2 carregar

   // insere a div no iframe visível
   iFrame.contentDocument.body.innerHTML = iFrame2.contentWindow.document.querySelector(div_id).outerHTML;
   iFrame2.outerHTML = ''; // remove o iframe2 do DOM
}
</script>