Jump to content

Show/hide divs inside inline frame from main page


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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites
  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...