Custom Search page with iframes / html5 possibly?

Question

I am looking to build a custom webpage that will be loaded offline but will access external (rather internal company specific pages). We have several tools that access different analytics but each page has a search bar that ise used to search by "team". Is there a way that I can have a single page that will have and iframe that will load each page but not show the pages until a "tab" or button is clicked to show it within the iframe. The key would be to have it all loaded in the background and ready to go once clicked.

any possible way I can achieve this? I know that some js will be required but I am just not sure where to begin aside from an index.html.

Thanks for any suggestions or pointing me in the right direction!

Answer 1

A lot of different ways to do it. One way would be to load the iframes and have CSS have it hidden until a button is pressed which changes the CSS to show the iframe.

Example Code https://jsfiddle.net/9og3subh/3/

HTML

<div><button id="button" type="button">Click to show</button></div> 
<iframe id="frame" src="https://www.google.com"></iframe>

CSS

#frame {
    display: none;
}

JavaScript

$( "#button" ).click(function() {
    $("#frame").css({"display":"inline"});
});

Hope this helped and answered your question.