Calling page by HREF and pressing in IFRAME the id of another page

Question

People, See if this situation is possible in HTML5 and CSS:

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

Note: all files inside the same folder.

In the archive index.html there is a link to the page html services..
Within the html services. there is a Iframe with src for desc_servicos.html. Already in the desc_servicos.html there are several sections with their ID’s.

There is possibility to call the page html services. passing the id of a Section, from the file desc_servicos.html, to be loaded into IFRAME?

I’m aware of that option and I know it works when it’s on the same page, but nay I have science when it comes to several pages.

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

I’m sorry if I confused the explanation

Answer 1

Page-long .html, you can do this using Javascript. You can do this by following the steps:

1. Add to hash with the id of div that you will carry on href of the link to index.html:

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

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

Why two iframes being one hidden? What is not hidden will receive the div of the other who is hidden. That’s because the iframe occult is that will load the page desc_servicos.html and you don’t have to show up, because it will be fully loaded so that one can catch the div desired.

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 body) page servicos.html:

<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 the page index.html (substitute id_da_div for id of div there’s iframe you want to take):

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

On the page servicos.html:

<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>