BiXma Augmented
asked on
show/hide divs in html page instantly to prevent memory consumption
Hello,
I want to create a web page with 2 divs and 4 buttons:
div iframe1 (shown by default when page is loaded)
div iframe2 (hidden by default when page is loaded and not rendered)
button frame1_show which show the div iframe1 and render the iframe instantly
button frame1_hide which show the div iframe1 and remove the content from memory and html source
button frame2_show which show the div iframe2 and render the iframe instantly
button frame2_hide which show the div iframe2 and remove the content from memory and html source
The goal to achieve is show/hide div's iframe when needed to prevent memory and cpu consuption when the div are hidden.
I want to create a web page with 2 divs and 4 buttons:
div iframe1 (shown by default when page is loaded)
div iframe2 (hidden by default when page is loaded and not rendered)
button frame1_show which show the div iframe1 and render the iframe instantly
button frame1_hide which show the div iframe1 and remove the content from memory and html source
button frame2_show which show the div iframe2 and render the iframe instantly
button frame2_hide which show the div iframe2 and remove the content from memory and html source
The goal to achieve is show/hide div's iframe when needed to prevent memory and cpu consuption when the div are hidden.
leakim971
instantly but without rendering and hiding(putting in memory) ?
ASKER
i mean that when the div is hidden, the url is not requested and its content not loaded, nut when show it it show the content, and when hide the div the contents get disposed
do you have some code/html to show post so we can start from there?
For your main loading page
Then source for "iframe1.html"
In order to call or change content of another frame, all frames and content must be on the same domain.
In the above example the "id" values can be anything of your choosing.
<html>
<body>
<div id="mydivOne"><iframe id="myframeOne" src="./iframe1.html"></iframe></div>
<div id="mydivTwo" style="display:none;"><iframe id="myframeTwo"></iframe></div>
</body>
</html>Then source for "iframe1.html"
<html>
<body>
<button onClick="top.document.getElementById('myframeTwo').src='./button.html';top.document.getElementById('mydivTwo').style.display='block'">Click Me</button>
</body>
</html>In order to call or change content of another frame, all frames and content must be on the same domain.
In the above example the "id" values can be anything of your choosing.
ASKER
I Tried but didnt worked!
Which part did not work?
And are all your HTML pages on the same domain?
And is the main load page at "top" or is it also in a frame?
And are all your HTML pages on the same domain?
And is the main load page at "top" or is it also in a frame?
Change your iframe1.html to:
<html>
<script>
function doMe() {
top.document.getElementById('myframeTwo').src='./button.html';
top.document.getElementById('mydivTwo').style.display='block';
}
</script>
<body>
<button onClick="doMe()">Click Me</button>
</body>
</html>ASKER
I donno what ia did wrong but always failed, can u plz send them as zip file?
Copy & Paste the content below in to seperate HTML files on your or development space and then open "index.html" in your browser - this will let you see how it works.
"index.html"
"index.html"
<html>
<body>
<div id="mydivOne"><iframe id="myframeOne" src="./iframe1.html"></iframe></div>
<div id="mydivTwo" style="display:none;"><iframe id="myframeTwo"></iframe></div>
</body>
</html><html>
<body>
<button onClick="top.document.getElementById('myframeTwo').src='./button.html';top.document.getElementById('mydivTwo').style.display='block'">Click Me</button>
</body>
</html><html>
<body>
<div>Hello World</div>
</body>
</html>This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.