Update parent from iframe using jquery - javascript

I have this minimal test case
a.html
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myinput">
<iframe id="frame" src="b.html" style="width:100%;height:100%" frameBorder="0"></iframe>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<body>
<script>
function update_parent(value) {
window.parent.document.getElementById('myinput').value=value;
}
</script>
<a class="tag" name="something" href="javascript:void(0)" onclick="update_parent(something)"/>Bla Bla</a>
</body>
</html>
The purpose here is to update the input box in parent window, when a button is clicked on the iframe. I tried to do it using plain javascript as you can see above, but it doesn't work either. I want to do this using jquery if possible.

function update_parent(value) {
$('#myinput', window.parent.document).val(value);
}
The second parameter for the $() wrapper is the context in which to search. This defaults to document so passing the parent sets the parent as the search context.

Your parent element would be window.self.top
You can access the contents or the document of the parent element.
Having said that, your code should look like:
$(window.self.top.document).find('#myinput');
This will give you the element in your parent.

Related

How to use parent page javascript file in child jsp?

my parent jsp contains two div..
<html>
<script src="a.js"/>
<body>
<div id="child1"></div>
<div id="child2"></div>
</body>
</html>
my child page is
<html>
<body>
child_1
</body>
</html>
using ajax call i am loading child page into my parent div and want to use the same js file in child page loaded by parent page by referring it using any method and not by manually including it on child page,So please anyone help me with this i am in big trouble because of this.
In ajax call:
$.get('/home',
{script:'resolvedJSLink'},
function(){$('#child1').html(data);}
);
And in child1.jsp:
<html>
<script src='<%= request.getParameter("script") %>'/>
<body>
child_1
</body>
</html>
Maybe another solution for this case is load script dynamically: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Close a (dialog box) iFrame from a button within the iFrame

I have two files, named main_page.html and dialog_box.html (see code below).
I want my handleCloseDialogButton() to "close the dialog box", in other words to reload main_page.html, with theFrame.style.display reset to "none".
How can I do this ? Should I use window.open("main_page.html") or window.location.href="main_page.html" or something else ?
Note: I do not want to use Javascript’s alert() function because its capabilities are not sufficient for what I need.
Contents of main_page.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleDialogButton()
{
var theFrame=document.getElementById("myDialogBox");
theFrame.style.display="block";
theFrame;
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div>
<iframe id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe>
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box"
onClick="javascript:handleDialogButton();" />
</body>
</html>
Contents of dialog_box.html :
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script>
function handleCloseDialogButton()
{
}
</script>
</head>
<body>
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div>
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box"
onClick="javascript:handleCloseDialogButton();" />
</body>
</html>
You can access parent elements from iframe by using window.parent.
See window.parent for details.
With window.parent you can either call parent js function or you can access parent element. Accessing parent element in your case should look like: window.parent.document.getElementById('myDialogBox');
Use this in your handleCloseDialogButton function and set its display to none:
function handleCloseDialogButton()
{
window.parent.document.getElementById('myDialogBox').style.display="none";
}
NOTE: This will not work in file mode in Chrome. You have to put your pages on web server, and than it will work in Chrome browser too.

JavaScript code in iframe

I need to run JavaScript code in iframe. But script with id "us" loaded after creating iframe. How to run this javascript in iframe?
<iframe id="preview">
#document
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$("#preview").ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test"></div>
</body>
</html>
</iframe>
Thanks in advance.
The IFrame has no access to what's outside of it. Everything inside IFrame is separate page ergo you threat it like so. So you do your document.ready in it.
Example: http://jsfiddle.net/ZTJUB/
// Since this is page you wait until it's loaded
$(function() {
$(".test").click(function() {
alert(true);
});
});
The jQuery instance inside of the iFrame doesn't know it's supposed to be traversing the parent DOM, so therefore it won't know where to look for an element with the id "preview"
As per my comments above, you should attach to the iframe's document.ready, like this:
// Since this is page you wait until it's loaded
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
EDIT:
Just realizing you are probably having an entirely different issue here - Html code as IFRAME source rather than a URL - if you are trying to embed the iframe code inline, you are going to have problems. Take the following code for example:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="us" type="text/javascript">
$(document).ready(function() {
$(".test").click(function() {
alert(true);
});
});
</script>
</head>
<body>
<style></style>
<div class="test">test</div>
</body>
</html>
</iframe>
</body>
</html>
if you render that page in firefox, and then inspect the source in firebug, you'll see:
<html>
<head></head>
<body>
Some stuff here
<iframe id="preview">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
This is happening because the browser isn't expecting to see the code inline between the iframe tags.
Since you're not addressing the questions in the comments to better clarify what you are trying to do... I shall assume you are trying to access content IN your iframe FROM your parent page. Since the other answer should work fine if trying to run it from within the iframe.
On the parent page try something like:
$(function() {
$("#preview").load(function ()
$("#preview").contents().find(".test").click(function() {alert(true);});
});
});
*This assumes both parent and iframe are on the same domain.

How to change elements attribute from iframe element?

I am trying to get set the height of the div from inside of my iframe.
I have something like
<div id='test' style='height:150px;'>some stuff..</div>
<iframe id="test" src="http://www.myproject.com frameborder="0" scrolling="no">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test project</title>
<link rel="stylesheet" type="text/css" href="g_reset.css">
<script type="text/javascript" src="options.js"></script>
</head>
bunch of html...
<a id='click' href='#'>click<a/>
</iframe>
I want to be able to change the 'test' div height when I click 'click' inside my iframe.
in my options.js I have..
$('#click).click(function(){
alert('pop')
$('#test').attr('height','500');
})
Alert will pop but it doesn't seem to change the height of the div. Can anyone help me about the issue? thanks a lot!
As a jQuery solution, you can use something like this within your iframe.
$('#test', window.parent.document).css('height', '500px');
or
$(window.parent.document).find('#test').css('height', '500px');
For the first example, the second parameter in the $() is the context to search within. Also notice I used css() instead of attr() since you're trying to modify the styles of element, instead of an attribute.
Try this:D
<a id='click' href='#' onClick='parent.document.getElementById(\"test\").style.height=\"50px\"'>click<a/>

Targeting html elements pulled in externally from iframe with css

Is there a way to target an HTML element that is being pulled in dynamically via an iframe. I have an example below to illustrate what I would like to do:
<html>
<body>
<iframe>
<html>
<body>
<a id="id">I want to target this element</a>
</body>
</html>
</iframe>
</body>
</html>
#id{display:none;}
Note: I am open to use javascript or similar to target this element. Accessing the content from the source is not an option.

Categories

Resources