Show and hide a frame using JavaScript or jQuery - javascript

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();
});

Related

JavaScript style body outside iframe

How can the outermost body tag be styled using JavaScript from inside the innermost body tag of an iFrame?
<html>
<head>
</head>
<body>
<div id="ad_tag" style="width: 1px; height: 1px;">
<div id="ad_container" style="border: 0pt none;">
<iframe id="ad_iframe" title="title" name="name" scrolling="no" marginwidth="0" marginheight="0" style="border: 0px none; vertical-align: bottom;" srcdoc="" width="1" height="1" frameborder="0">
<html>
<head>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<script>
parent.document.body.style.background = "url('https://news.nationalgeographic.com/content/dam/news/photos/000/676/67655.jpg') no-repeat top center fixed #ffffff";
</script>
</body>
</html>
</iframe>
</div>
</div>
<div id="content">
</div>
</body>
</html>
In this specific case:
No direct editing of attributes or styling allowed, existing are preset.
Only child elements of the innermost body can be edited.
The goal is to deliver a background image using Google DFP.
The best way would be with a post message from the frame, that the parent (the site) will execute through listener.
So your iframe should contain some code like:
<script>
window.parent.postMessage({
'func': 'changeBackground',
'message': ''
}, "*");
</script>
And your parent (the site) should contain a listener like:
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
function changeBackground(message) {
$('div#backgroundwrapper').css({
'background-image': 'url("https:/example.com/example.jpg")',
$('div#backgroundwrapper').click();
var win = window.open( '%%CLICK_URL_ESC%%%%DEST_URL%%', '_blank');
win.focus();
});
}
</script>
In my example, it will put the image file as a background on a div with ID backgroundwrapper. My example uses jQuery to change the CSS and adding a clicktag, but it could be made without it as well.

How to display an iframe on button click

I just want to know how can I display an iframe on button click
Here is my code:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<button id="postYourAdd" onclick="postYourAdd()">Button</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="200" height="200" style="background:#ffffff"></iframe>
At least in the Snippet you provided, you forgot to add a reference to JQuery. See it working now:
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("src"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>
<body>
<p>This is IFrame</p>
<button onclick="displayIframe()">Click me</button>
<div id="iframeDisplay"></div>
<script>
function displayIframe() {
document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"../HtmlPage1.html\" height=\"200\" width=\"300\" ></iframe>";
}
</script>
</body>
function postYourAdd () {
var iframe = $("#forPostyouradd");
iframe.attr("src", iframe.data("https://www.google.com/"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="postYourAdd" onclick="postYourAdd()">OPEN</button>
<iframe id="forPostyouradd" data-src="http://www.w3schools.com" src="about:blank" width="500" height="200" style="background:#ffffff"></iframe>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<button id="postYourAdd" onclick="light()">OPEN</button>
<iframe id="forPostyouradd" src="" title="W3Schools Free Online Web Tutorials">
</iframe>
<script>
function light() {
var iframe = $("#forPostyouradd");
debugger;
iframe.attr("src", "https://www.w3schools.com/java/default.asp");
}
</script>
</body>
</html>

Hide iframe or div from other iframe in a frame

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

Completely Hide frame in framesets using Javascript or Jquery

Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>

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