Jump to content

Show/hide divs inside inline frame from main page


paulclift

Recommended Posts

I am trying to use a simple radio button in my main page to show and hide divs by class which are inside an iframe. Here are the relevant snippets of code:

 

In the "index.html" :
<head>
<script>
function setlanguage(language) {
..........will save myself the embarrassment of showing you my attempts at coding this.................
}
</script>
</head>
<body>
<input id="english" type="radio" checked onclick="setlanguage('EN')">
<input id="deutsch" type="radio" onclick="setlanguage('DE')">
<input id="francais" type="radio" onclick="setlanguage('FR')">
<input id="italiano" type="radio" onclick="setlanguage('IT')">
<iframe src="home.html"></iframe>
</body>
Example from "inside-the-iframe.html" :
<div class="EN">Hello world</div>
<div class="DE">Guten Tag</div>
<div class="FR">Bonjour</div>
<div class="IT">Ciao Rigazzi</div>
Should be dead easy for you guys... please help!
Edited by paulclift
Link to comment
Share on other sites

Hmmm is that right? I was looking for other instances of this and got the impression that it was possible..... my other thought was to use sessionStorage and pass the value to the iframe documents, but if you could simply control the iframe pages from the index.html it would be much cleaner....

Link to comment
Share on other sites

So the following seems promising, but is not working for me for the moment:

 

 

<script>
function setlanguage(language, n1, n2, n3)
{
var ShowLang = document.getElementById('iframe').contentWindow.document.getElementsByClassName(language);
for(var i = 0; i < ShowLang.length; i++)
{
ShowLang.style.display="block";
}
var HideLang = document.getElementById('iframe')contentWindow.document.getElementsByClassName(n1, n2, n3);
for(var i = 0; i < HideLang.length; i++)
{
HideLang.style.display="none";
}
}
</script>
<body>
<input id="english" type="radio" checked onclick="setlanguage('EN', 'DE', 'FR', 'IT')">
<input id="deutsch" type="radio" onclick="setlanguage('DE', 'EN', 'FR', 'IT')">
<input id="francais" type="radio" onclick="setlanguage('FR', 'EN, 'DE', 'IT')">
<input id="italiano" type="radio" onclick="setlanguage('IT', 'EN', 'DE', 'FR')">
<div id="iframe">
<iframe src="home.html"></iframe>
</div>
</body>

(it goes without saying that the "home.html" document is full of divs with class "EN", "DE" etc....)

 

Perhaps I need to reload the iframe page after changing the display value in the parent document?

Edited by paulclift
Link to comment
Share on other sites

I noticed that other people seemed to have gotten the above javascript running with a 'getElementById' rather than by ClassName....... but surely that would not stop it from working....

 

Also, I know that an 'if' and 'else' inside the function would be rather more elegant....

Edited by paulclift
Link to comment
Share on other sites

var HideLang = document.getElementById('iframe')contentWindow.document.getElementsByClassName(n1, n2, n3);getElementsByClassName takes 1 parameter, not 3.

I noticed that other people seemed to have gotten the above javascript running with a 'getElementById' rather than by ClassName....... but surely that would not stop it from working....

That's fine if you are trying to get a single element with a given ID, but that's not what you're doing.
Link to comment
Share on other sites

Thanks for the help...... that's good for a start, but I noticed that if I replace 'n1' with, for example 'IT', those divs still don't disappear from the page loaded inside the iframe..... I cannot understand why that part is not working!

Link to comment
Share on other sites

With this code:

 

<script>
function setlanguage(language, n1, n2, n3)
{
var ShowLang = document.getElementById('mainframe').contentWindow.document.getElementsByClassName(language);
for(var i = 0; i < ShowLang.length; i++)
{ ShowLang.style.display='none'; }
var HideLang = document.getElementById('mainframe')contentWindow.document.getElementsByClassName(n1);
for(var i = 0; i < HideLang.length; i++)
{ HideLang.style.display='none'; }
}
</script>
...I get the error message "SyntaxError: Expected an identifier but found 'contentWindow' instead" for the line:
var HideLang = document.getElementById('mainframe')contentWindow.document.getElementsByClassName(n1);
Link to comment
Share on other sites

This works on my desktop...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>iframe</title><style>#ifr{width: 400px;height: 300px;}</style><script>window.onload = init;function init(){document.getElementById('ifr').src = 'iframes/inside.html';document.getElementById('enchk').checked = 'true';}function setlang(lang) {var i;var len;var list;var ifr = document.getElementById('ifr');var cw = (ifr.contentWindow || ifr.contentDocument);var ide1 = cw.document.getElementById('insidediv');ide1.innerHTML = 'Greeting = '+ lang;list = cw.document.getElementsByClassName('langdiv');for (i=0, len=list.length ; i<len ; i++){list[i].style.display = 'none';}list = cw.document.getElementsByClassName(lang);for (i=0, len=list.length ; i<len ; i++){list[i].style.display = 'block';}}</script></head><body><iframe id="ifr"><p>Iframe Failure</p></iframe><h3>Select:</h3><input name="lrad" id="enchk" type="radio" onchange="setlang('EN')"/>English<br/><input name="lrad" type="radio" onchange="setlang('DE')"/>German<br/><input name="lrad" type="radio" onchange="setlang('FR')"/>French<br/><input name="lrad" type="radio" onchange="setlang('IT')"/>Italian<br/></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>iframe</title><style>body{background-color:#89e;}#insidediv{background-color:#999;}.DE,.FR,.IT{display: none;}</style></head><body><h2>iframe testing</h2><div id="insidediv">Greeting = EN</div><div class="EN langdiv">Hello world</div><div class="DE langdiv">Guten Tag</div><div class="FR langdiv">Bonjour</div><div class="IT langdiv">Ciao Rigazzi</div></body></html>
Link to comment
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...