Hide iframe or div from other iframe in a frame - javascript

I am trying to show or hide a div containing a iframe from another iframe which contains a frameset.
So if you are looking in the code; I am trying to show or hide div "dd" with a function within shades.html. Shades.html is part of a frameset in index2.html which is shown in iframe "UBERFRAME" in index.html.
Some code:
Index.html:
<HTML>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
<iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
index2.html:
<HTML>
<FRAMESET ROWS="51,376,53,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAMESET COLS="70,335,324,71,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="HEADER/home.html" NAME="homeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/name.html" NAME="nameheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/datetime.html" NAME="datetimeheader" NORESIZE SCROLLING="no">
<FRAME SRC="HEADER/help.html" NAME="helpheader" NORESIZE SCROLLING="no">
</FRAMESET>
<FRAME SRC="mainempty.html" NAME="mainframe2" NORESIZE SCROLLING="no" BORDER="0">
<FRAMESET COLS="69,142,70,316,100,103,*" FRAMEBORDER="0" FRAMESPACING="0">
<FRAME SRC="FOOTER/so.html" NAME="so" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/shades.html" NAME="shades" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/sendsource.html" NAME="sendsource" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/volume.html" NAME="volume" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/micmute.html" NAME="micmute" NORESIZE SCROLLING="no">
<FRAME SRC="FOOTER/outmute.html" NAME="outmute" NORESIZE SCROLLING="no">
</FRAMESET>
</FRAMESET>
shades.html:
<HTML>
<HEAD>
<script type="text/javascript">
function showdd() {
window.frames['overlayframe'].style.display = "none";
}
</script>
</HEAD>
<BODY>
<a href="#" onclick="showdd(); return false;" >
<img src="foo.png">
</a>
</BODY>
</HTML>
Or plunkr demo: Click

Are all three pages (parent documents and the two iframes) from the same domain and subdomain?
If not, your only real option is to use window.postmessage
And even if they are from same domain, post message is good approach compared to directly accessing the DOM of another page.
Either way, with or without postmessage, You will need a reference to the window object of the iframe that you wish to target.
One approach is to have frame A inform the parent page (via raising event or calling a function in the parent page js), and then have the parent page inform frame B.
If you supply a example page I can create a working example for you.
EDIT: below code sample from the solution to the example that you provided.
notice how the frame is calling a function parent document. parent document then manipulates DOM of the other iframe.
plunkr
in frame A:
$('#show').click(window.parent.showDuck);
$('#hide').click(window.parent.hideDuck);
in parent document:
function showDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'visible');
}
function hideDuck(){
$('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'hidden');
}

A mate helped me fix the problem:
Index.html:
<HTML>
<HEAD>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function showDuck(){
$('#dd').show();
$('#overlayframe').show;
}
function hideDuck(){
$('#dd').hide();
}
</script>
</HEAD>
<BODY>
<div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
<iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
<div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
<iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
</div>
</BODY>
</HTML>
index2 unharmed
shades.html:
<HTML>
<BODY>
<a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
show Donald Duck
</a>
</BODY>
</HTML>
testframe.html:
<HTML>
<BODY>
<IMG SRC="http://img3.wikia.nocookie.net/__cb20130203061323/disney/images/6/6b/Donald_Duck_transparent.png" onclick="javascript:window.parent.hideDuck(); return false;">
</BODY>
</HTML>
Or http://plnkr.co/edit/x13V7l0qwv0jtI8IKXtf?p=info

Related

How to get elements from nested <html> document?

<html><head>
<title>Welcome</title>
<style type="text/css"></style></head>
<frameset border="false" frameborder="O" framespacing="0" rows="0,*" cols="*">
<frame marginwidth="0" marginheight="0" name="frame_rsafp" src="rsa_flash_cookie.html" noresize="true" scrolling="no">
<frameset border="false" frameborder="O" framespacing="0" rows="*,30" cols="*">
<frame marginwidth="0" marginheight="0" name="login_page" noresize="true" scrolling="yes">
#document
<html>
<form name="frmLogin" action="entry" class="login" method="post" target="_top" autocomplete="off">
<span class="passfield">
<input type="text" name="LoginUserId" onkeypress="return fSubmit(event);" value="" class="ipassword">
</span>
</form>
</html>
<frame marginwidth="0" marginheight="0" name="footer" src="footer.html" noresize="true" scrolling="no">
</frameset>
</frameset>
</html>
For above html code I want to set value to text field "LoginUserId".
I tried
document.getElementsByName("LoginUserId")[0].value = "MyValue";
but it returns the error Cannot set property 'value' of undefined.
I can only get elements upto "login_page" and count of child elements of "login_page" returns 0.
var ele = document.getElementsByName("login_page")[0].childNodes;
alert(ele.length);
How can I get elements of this nested html document?
Try this
var iframe = document.getElementsByName("login_page")[0];
var ele = iframe.contentDocument || iframe.contentWindow.document;
Try this
var loginBox = document.getElementById('login_page');
var values = loginBox.getElementsByName("LoginUserId")[0].value;
You need to get the iframe first:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
and then you can work on that document
if you just want to change the value of the LoginUserId input you can do this:
var inputField = document.querySelector("input[name=LoginUserId]");
inputField.value="test";

Show and hide a frame using JavaScript or jQuery

I need to hide the frame "topFrame" and "menu" when I click on any image or button and unhide it when I click on it again. Is there a way I can achieve it easily?
Sorry for not posting "topFrame" and "menu" jsp files, as those are dynamically rendering in my application.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/jquery-1.10.2.min.js" language="javascript"></script>
<style type="text/css"></style>
</head>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="/someAction1.do" name="topFrame" scrolling="no" noresize="">
<frameset cols="20%,80%*" frameborder="0" framespacing="0" border="0">
<frame src="/someAction2.do" name="menu" marginheight="0" marginwidth="0" noresize="true" scrolling="auto" framespacing="0" border="0" frameborder="0">
<frame src="/someAction2.do" name="information" marginheight="0" marginwidth="0" scrolling="auto" framespacing="0" border="0" frameborder="0">
</frameset>
</frameset>
<noframes>
// ...
</noframes>
</html>
Use the toggle() function to show/hide.
$('button').on('click',function(){
$('frame[name="topFrame"],frame[name="menu"]').toggle();
});
If the buttons too are generated dynamically, delegation would be important.
$(document).on('click','button_or_img',function(){
$('frame[name="topFrame"],frame[name="menu"]').toggle();
});
I think the following would help you. The code is very simple and self explanatory...
<html>
<head>
<script>
function show1()
{
document.getElementById("div_main").style.visibility = "visible";
}
function close_dialog()
{
document.getElementById("div_main").style.visibility = "hidden";
}
</script>
<style>
*
{
margin:0px;
padding:0px;
}
#div_main
{
height:100%;
width:100%;
background-color:rgba(204,204,204,.8);
z-index:300;
position:fixed;
visibility:hidden;
}
#cls_btn
{
height:100px;
width:100px;
margin-left:50%;
}
body
{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_main">
<input type="button" value="Close Me" onClick="close_dialog()" id="cls_btn">
</div>
<input type="button" value="Click Me" onClick="show1()">
</body>
</html>
Add this code at the bottom of your page before the body closing tag:
<script>
(function(){
$('img, button').on("click" , function (e) {
$('frame[name="topFrame"], frame[name="menu"]').toggle();
});
}());
</script>
You can do it via fadeToggle()/toggle().
$('img, button').click(function () {
$('frame[name="topFrame"], frame[name="menu"]').fadeToggle("slow");
});
I think it will work:
$("#button").click(function(){
$('[name="menu"]').toggle();
$('[name="information"]').toggle();
});

Crossbrowser way to remove the HTML comment tags from a div content with jquery

I have this code
<div id="_right-content-top">
<!-- <iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> -->
</div>
Using jquery or any other method (pure js) I want to assig the value of this div to another div but without the comment, in this way:
<div id="right-content-top">
<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
How Can I achieve this task that work in all the browser ? I thank you any help
As stated in the comment above, the best way to load the ad only once the whole page is loaded is to have the following empty div on your page:
<div id="right-content-top"></div>​
and then run this to add the ad to the div once the DOM has loaded:
$(document).ready(function() {
$("#right-content-top").append('<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>');
});​
or this to add the ad to the div only after the rest of the page fully loads:
$(window).load(function() {
$("#right-content-top").append('<iframe src="/ads/banner.jsp" width="160" height="600" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>');
});​
<html>
<script type="text/javascript">
function move()
{
t = document.getElementById('a').innerHTML.slice(5, -4)
document.getElementById('b').innerHTML = t
}
</script>
<body>
move
<div id="a"><!-- hello world --></div>
<div id="b"></div>
</body>
</html>

How to Set Fixed Width of Frameset and centrally Align?

Recently i got one issue while using a frameset in my Jsp Page.
The Code is :
<html>
<frameset rows="8%,*" border="0" >
<frame src="HeaderUi.jsp" name="header" scrolling="no" style="border-bottom:5px solid #630000;min-height:50px;">
<frameset cols="215px,540px,250px" border="0" >
<frame src="webSearchUi" name="search">
<frameset rows="65%,*" border="0" >
<frame src="webMainPageUi" name="mainPage" scrolling="yes" style="border:1px dotted #7D7D7D; border-top:0px; border-bottom:0px dashed #5c5c5c">
<frame src="webEventPanelUi" name="eventPanel" style="border:1px dotted #7D7D7D; border-top:1px solid #7D7D7D; border-bottom:0px dashed #5c5c5c">
</frameset>
<frame src="webDataPanelUi" name="dataPanel" style="border-style:solid;border-width:0pt;border-color:66CC33"></frameset>
</html>
In this i want to set a fixed width to frameset and display centrally align, Fixed Width Should be 1000px and Centrally align, When i tried this its working properly in IE by using margin auto as ashown in code above, but showing Problem in Chrome and Firefox. Please help me out from this Problem...
Try to use next HTML markup:
<frameset cols="*,1000px,*" border="0">
<frame src="about:blank" />
<!-- Next frameset is centered horizontally and have width:1000px -->
<!-- Tested in IE8,Chrome13,Opera11.50,Safari5,FF7 -->
<frameset rows="8%,*" border="0">
<frame src="HeaderUi.jsp" name="header" scrolling="no" style="border-bottom:5px solid #630000;" />
<frameset cols="210px,540px,*" border="0">
<frame src="webSearchUi" name="search" />
<frameset rows="65%,*" border="0" >
<frame src="webMainPageUi" name="mainPage" scrolling="yes" style="border:1px dotted #7D7D7D; border-top:0px; border-bottom:0px dashed #5c5c5c" />
<frame src="webEventPanelUi" name="eventPanel" style="border:1px dotted #7D7D7D; border-top:1px solid #7D7D7D; border-bottom:0px dashed #5c5c5c" />
</frameset>
<frame src="about:blank" />
</frameset>
</frameset>
<frame src="about:blank" />
</frameset>

jQuery: Access frame in nested frameset

I have a document which has a nested frameset. I need to access one of the nested frames, named "sq_main", and access content inside this frame. Here is my structure:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="28,*" frameborder="0" border="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=header" name="sq_header" scrolling="no" marginwidth="0" marginheight="0">
<frameset cols="380,10,*" frameborder="0" border="0" id ="main_frameset">
<frame src="/_admin/?SQ_BACKEND_PAGE=sidenav" name="sq_sidenav" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=resizer" name="sq_resizer" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin?SQ_BACKEND_PAGE=main&assetid=43&sq_from_frontend=1" name="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes></noframes>
</html>
Sadly, I can't change the code, that is why I need to access it with jQuery. I have tried to write a jQuery selector to access the "sq_main" frame, but no luck so far:
$('body', parent.frames[0].sq_main).prepend('<h1>TEST!!!!</h1>');
Ideas on how to drill down into this ugly structure? :)
Try to navigate one step at a time. IIRC, the frames array only works with iframes. Try the selector frame[name = 'sq_main'] instead.
Example by Ronny Sherer:
var frameDocument = $('frame[name="mainFrame"]', top.document)[0].contentDocument;
$(frameDocument).find('body').prepend('<h1>TEST!!!!</h1>');
var sql_mainJQ = $("frame[name='sql_main']", top.document);
//$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :( Bad
var frameContent = sql_mainJQ[0].contentDocument;
if ($.browser.msie) {
frameContent = mainFrameJQ[0].contentWindow.document;
} else {
frameContent = mainFrameJQ[0].contentDocument;
}
$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :> Maybe OK!
<html>
<head>
<title>frames.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="100,*" frameborder="1" border="2">
<frame src="helloworld.html" name="sq_header" id="sq_header" scrolling="yes" marginwidth="0" marginheight="0">
<frameset cols="380,300,*" frameborder="1" border="2" id ="main_frameset">
<frame src="helloworld.html" name="sq_sidenav" id="sq_sidenav" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="anotherpage.html" name="sq_resizer" id="sq_resizer" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="helloworld.html" name="sq_main" id="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes>
</noframes>
</html>
<html>
<head>
<title>anotherpage.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
var d = new Date();
var n = d.getTime();
$(document).ready(function(){
$('#title').html($("title").html());
/*
this is to work in safari
see "Updated answer provided below....looks like a setTimeout maybe needed as the frames aren't loaded when the initial startup script runs. – David Hoerster Aug 21 '10 at 16:38
url: http://stackoverflow.com/questions/3534082/jquery-access-table-inside-a-frame
*/
setTimeout(writemsg, 2000);
function writemsg() {
$('#helloworld',top.frames["sq_main"].document).html("Write from "+ $("title").html()+" in sq_main at "+ n);
}
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>
<html>
<head>
<title>helloworld.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
$(document).ready(function(){
$('#title').html($("title").html());
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>

Categories