paulclift Posted March 31, 2014 Share Posted March 31, 2014 (edited) 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 March 31, 2014 by paulclift Link to comment Share on other sites More sharing options...
justsomeguy Posted March 31, 2014 Share Posted March 31, 2014 I doubt that Javascript is going to have access to modify the contents of the iframe, but you can use this to get elements by class name:https://www.google.com/search?client=opera&q=getelementsbyclassname&sourceid=opera&ie=UTF-8&oe=UTF-8 Link to comment Share on other sites More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 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 More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 (edited) 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 April 1, 2014 by paulclift Link to comment Share on other sites More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 (edited) 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 April 1, 2014 by paulclift Link to comment Share on other sites More sharing options...
justsomeguy Posted April 1, 2014 Share Posted April 1, 2014 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 More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 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 More sharing options...
justsomeguy Posted April 1, 2014 Share Posted April 1, 2014 Are you checking for Javascript error messages in the console? Link to comment Share on other sites More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 hmmm it seems that having two 'for's or two 'var's in my function is causing the problem...... I thought that that was okay? Link to comment Share on other sites More sharing options...
justsomeguy Posted April 1, 2014 Share Posted April 1, 2014 There are no restrictions on things like the number of variables or statements you can have. Link to comment Share on other sites More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 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 More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 I think perhaps that it would be better just to switch to an 'if' and 'else' .... your thoughts? Link to comment Share on other sites More sharing options...
paulclift Posted April 1, 2014 Author Share Posted April 1, 2014 AHHHH yes, the '.' before 'contentWindow' ..... now we're in business Link to comment Share on other sites More sharing options...
davej Posted April 2, 2014 Share Posted April 2, 2014 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 More sharing options...
paulclift Posted August 16, 2014 Author Share Posted August 16, 2014 Just realised I never thanked you for this, justsomeguy - so thanks very much - your code really helped me out a lot! Link to comment Share on other sites More sharing options...
justsomeguy Posted August 18, 2014 Share Posted August 18, 2014 You probably meant to thank Dave. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now