javascript: is it possible to target div of another file? - javascript

Let me explain the purpose of this. I'm using some CMS and I'm trying to customize it with php scripts of my own that I embedded to the home page with IFRAME. My php script gives back some links which I would like to open outside that IFRAME - as a part of some other CMS block on the homepage. The idea is to target (from my php script) the div of that CMS block which is already showing some data. Is that possible?

If you need to access <div> or any other element of parent window from its child iframe
USE:
var elem=window.parent.document.getElementById('target');
inside <script> tag of iframe's document.
ex.
file: index.html (Give any name).
<html>
<body>
<div id="div_to_use_from_parent">Blah!</div>
<iframe src="xyz.php" width="xx" height="xx"></iframe>
</body>
</html>
file: xyz.php (same as src of iframe)
<?php
echo<<<html
<html>
<head>
<script type="text/javascript">
function do_blah(){
var elem=window.parent.document.getElementById('div_to_use_from_parent');
elem.innerHTML="iframe changed My Content!";
}
</script>
</head>
<body onLoad="do_blah();">
This is iframe
</body>
</html>
html;
?>
OR
if you need to access element in iframe from parent window
USE:
var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var yourDiv= frame.getElementById('div_you_want');
inside <script> tag of parent window's document.
ex.
file: index.html (Give any name).
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var elem= frame.getElementById('div_from_iframe');
elem.innerHTML+="<br /> And Parent window added this!";
};
</script>
</head>
<body>
<div id="div_to_use_from_parent">Blah!</div>
<iframe src="xyz.php" width="xx" height="xx"></iframe>
</body>
</html>
file: xyz.php (same as src of iframe)
<?php
echo<<<html
<html>
<body>
<div id="div_from_iframe"> This div from iframe</div>
</body>
</html>
html;
?>
parent window is the one in which original html(index.html) document along with your iframe(xyz.php) resides.
Hope it helps :-)!

var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var yourDiv= frame.getElementById('div_you_want');

From the page running inside the <iframe> you can refer to the parent page as window.parent, and perform actions as you normally would.
parent.document.getElementById('target_div').innerHTML = 'New content.';
Note JavaScript's cross-domain restrictions apply. You can only do that if both pages belong to the same domain.
In case of links, you can include to your <a> tags the attribute target="_parent", or set it as base target to apply to all links.
<head>
...
<base target="_parent">
</head>
You can also target a link to another iframe, all you have to do is set a name="iframe_name" to it and set target="iframe_name" to all links that should open in that area.

Related

how to get element inner <iframe> of <iframe>?

i have simple webpage and in this webpage , tage and thats id "a1" , this contain inner one more tag, and thats id "a2". i want to get element tag that's id="a2" by using javascript .
please helpe me, how can i get <h1> tag using javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get element from inner iframe </title>
</head>
<body>
<h1>hello world</h1>
<iframe id="a1" >
<iframe id="a2">
<h1 id="b1">help me</h1>
<p id="b2" >for get HTML tag using javascript DOM</p>
</iframe>
</iframe>
</body>
</html>
First of all, you can't put HTML code directly inside an iframe.
You have to separate it into a different file, and then link it by adding a "src" attribute to the iframe.
Now, assuming you have 3 file:
index.html - that contains the reference first iframe (#a1) and points to iframe1.html
iframe1.html - that contains the reference to the second iframe (#a2) and points to iframe2.html
iframe2.html - that contains the desired h1 tag (#b1)
Here is the code you need to get to it:
var iframe1 = document.getElementById('a1');
var iframeDoc1 = iframe1.contentDocument || iframe1.contentWindow.document;
var iframe2 = iframeDoc1.getElementById('a2');
var iframeDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;
var innerH1 = iframeDoc2.getElementById('b1');
Basically, you get each iframe, then you get its inner document, and then you look inside it.
An inline frame is used to embed another document within the current HTML document. Its better to user any other tag in place of iframe. As in your code h1 tag has and id attribute. You can get h1 tag by its id attribute.
var x= document.getElementById("b1");
alert(x.innerHTML);
use
var iframe = document.getElementById('iframeId');// your frame id here
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
Or you can use
window.frames['frameID'].document.getElementById('frameID')

How to add a javascript function inside the body of iframe

i have a html file with iframe and button in it, Is there a way to add a javascript function inside the body of iframe after I click the button?. Here is my code. Thanks
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
function callMe() {
var frame = $('iframe'),
contents = frame.contents(),
body = contents.find('body');
var script2 = document.createElement("script");
script2.type = "text/javascript";
script2.text = " function setEmployeeId(){var employeeId = 0;};"
$(body).append(script2);
};
</script>
<title>sample</title>
</head>
<body>
<iframe src="page2.html">
</iframe>
<button onClick="callMe();">click</button>
</body>
</html>
The result I want is to be like this.
<html>
<head>
<title>sample</title>
</head>
<body>
<iframe>
<html>
<head>
<title></title>
</head>
<body>
<script>
function setemployeeId() {
var employeeId = 0;
};
</script>
</body>
</html>
</iframe>
</body>
</html>
Hopefully you can clarify a few things for me as we go, but I think I have some bad news for you.
Any content that is loaded in an iframe cannot truly edited unless you own the page that is being loaded, in that case you can just bake in whatever you need into the loaded page.
HOWEVER!
You can still access elements in the iframe by using the contentWindow attribute. That is all laid out for you here: How to pick element inside iframe using document.getElementById
Once you've got the element you want to work with, you can create a function in the parent window and then add a call to the parent window's function using window.parent. That's outlined here: Calling a parent window function from an iframe
So if you wanted to make a button in an iframe alter the contents of the iframe you could use
var elem = document.getElementById('myframe1').contentWindow.document.getElementById('myButton')
and then create a function in your parent window
function changeIt(){
document.getElementById('thingToChangeInIframe_ItsIDintheIframe').property = 'value';
}
and append it to the button with the code
elem.setAttribute('onclick', 'changeIt();');
If you have any clarifications to what you need just comment and we'll work those out. I'm sorry this doesn't use much jQuery but that's not really my forte, but I think the pure javascript is relatively self explanatory.
EDIT: I should clarify that if the iframe is on another domain then your options are pretty much all eliminated. For security reasons you can't mess with the settings on other people's pages when you load them in an iframe.

Replace the content of _top window with content of iframe without reload page

Is it possible to replace the content of the browser window (_top frame) with the document loaded in an iframe, without issuing a new GET to load that document?
Something like this:
<html>
<head>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$("#link").click(function() {
// should present in the browser window the content of the iframe WITHOUT reload
// even preserve javascript/head code
$(document).html($("#frameDestination").html());
});
});
</script>
</head>
<body>
<a id="link" href="#">full window</a>
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe>
</body>
</html>
Use contents() when working with an iframe in jQuery.
$("#YourIframe").contents().find("html").html();
This is only going to work if the iframe is in the same domain as the parent.
I haven't tested cross domain, but on the same domain I have this script working:
$(document).ready(function() {
$("#link").click(function() {
var iframeBody = document.getElementById("frameDestination").contentDocument,
head = iframeBody['head'].innerHTML,
body = iframeBody['body'].innerHTML;
$('body').html( body );
$('head').html( head );
});
});
In the latest Firefox, I'm even able to set a variable in a script tag in the frame, and see that value in _top after clicking the link.

Accessing IFrame elment from external page loaded inside iFrame

I would like access the IFrame element available in the main page from the IFrame source page using JavaScript
Here is my main Page
<html>
<body>
<IFrame id="page-container" src="http://stackoverflow.com"
width="200px" height="200px">
</IFrame>
</body>
</html>
Child Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"/>
<script type="text/javascript" >
$(document).ready(function(){
var containerFrame= $('#page-container');
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.parent.frames["page-container"];
});
</script>
<body>
<div>some content..</div>
</body>
</html>
I am getting undefined for all my tries.
How it can be done? Is it possible?
Edit: I tried loading a cross domain page.
In IE i am getting error ' for security reason framing is not allowed' and also
domains, protocols and port must match. Can we achieve this any way?
var containerFrame = $('#page-container', window.parent.document)
This should firstly reference the parent of the window and then look for the iframe div
You need to specify the context to search for #page-container in, which in this case will be the parent window.
var containerFrame = $('#page-container', window.parent.document);

How to interact with <body> tag from iFrame

Say I have a code like this :
<html>
<head>
</head>
<body>
<iframe>
<script>
//execute javascript here to append another piece of javascript in parent body tag
</script>
</iframe>
</body>
</html>
Now I want to execute some javascript in that iFrame to append another piece of javascript in parent body tag.
If the iframe belongs to the same domain of the main window, you can simply do
top.functionToBeCalled(argument);

Categories