I need iframe js code to be part of the parent window. there is a way?
Calling from parent to iframe:
Suppose that your frame is called "myTargetFrame" and the function you're going to call is myFunction():
document.getElementById('myTargetFrame').contentWindow.myFunction();
You can use also window.frames instead of document.getElementById
Calling from iframe to parent:
parent.document.formname.fieldname.value = [value you want to set]
Hope it helps
In my case this worked perfectly.
<script type="text/javascript">
var wnd = window;
if(wnd.parent){
wnd = wnd.parent;
}
wnd.$.globalEval('$.unblockUI();Dialog.hide();');
</script>
This ofcourse uses jquery, but all it does is calls execScript or eval on the current window.
I don't think there is a better way do this.
Related
Info: I was working on it for so long, I have a webpage that contains an iframe. Inside that iframe i have opened a page (application) from my own site.
Question: I'm trying to get the <div class = "ps-lightbox"> </ div> inside that iframe out of the iframe. but i cant figure it out with jQuery..
I know it sounds confusing. But I hope you understand my explanation.
Does anyone know how to fix this? You could save my day..
Screenshot of the webpage <
You can not access the elements which are not part of iframe document. But if you have iframe of your own website then window.postMessage can do the trick.
Consider below example:
mainPage.html
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", function(evnet){
if(event.type === "GET_SOME_ELEMENT"){
var iframeWindow = document.getElementsById("iframe1")[0].contentWindow;
iframeWindow.postMessage("POST_SOME_ELEMENT", "TARGET_ORIGIN", {element: $(".some-element")}
}
});
<script/>
</head>
<body>
<div class="some-element"/>
<iframe id="iframe1" src="iframePage.html"/>
</body>
</html>
iframePage.html
<html>
<head>
<script type="text/javascript">
if(window.parent){
window.parent.postMessage("GET_SOME_ELEMENT", "TARGET_ORIGIN");
window.addEventListener("message", function(evnet){
if(event.type === "POST_SOME_ELEMENT"){
console.log(event.data.element);
}
});
}
<script/>
</head>
</html>
The exact question is how to do it with pure JavaScript, not with jQuery.
But I always use the solution that can be found in jQuery's source code. It's just one line of native JavaScript.
For me, it's the best, easily readable and even afaik the shortest way to get the content of the iframe.
First get your iframe
var iframe = document.getElementById('id_description_iframe');
// or
var iframe = document.querySelector('#id_description_iframe');
And then use jQuery's solution
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
It works even in the Internet Explorer which does this trick during
the contentWindow property of the iframe object. Most other browsers
use the contentDocument property and that is the reason why we proof
this property first in this OR condition. If it is not set to try
contentWindow.document.
Select elements in iframe
Then you can usually use getElementById() or even querySelectorAll() to select the DOM-Element from the iframeDocument:
if (!iframeDocument) {
throw "iframe couldn't be found in DOM.";
}
var iframeContent = iframeDocument.getElementById('frameBody');
// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');
Call functions in the iframe
Get just the window element from iframe to call some global functions, variables or whole libraries (e.g. jQuery):
var iframeWindow = iframe.contentWindow;
// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');
// or
iframeContent = iframeWindow.$('#frameBody');
// or even use any other global variable
iframeWindow.myVar = window.myVar;
// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);
Note
All this is possible if you observe the same-origin policy.
This might help you
var html = $(".ps-lightbox").contents().find("body").html()
And btw, you can get access to iframe's content only from the same origin due to XSS protection
Make sure your code is inside jQuery ready event.
// This won't work
$("#iframe").contents().find('.ps-lightbox');
// This will work
$(function() {
$("#iframe").contents().find('.ps-lightbox');
})
I have following iframe in a parent page:
<html>
....
<iframe src="child.html" name="variedName" id="variedId"></iframe>
...
</html>
Is there any way that make Javascript from child.html to get the name value or the id of the iframe that included it?
I need this because I want to add some markup around the iframe that is going to include child.html in the parent page using window.parent
Well, the quick and dirty solution would be to give the iframe the same name and id and access the iframe within the child page like this:
parent.document.getElementById(window.name);
Yes, but only if the pages share the same origin.
You can do something like:
var parent_window = window.parent;
iframes = parent_window.document.getElementsByTag("iframe");
if (iframes[0].window === window) {
// found it
}
The if statement might need some tweaking but I think this works.
Besides the presented solutions, You can use this:
parent.document.getElementsByName(window.name)[0];
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Or this:
parent.document.querySelector('iframe[src="'+location+'"]');
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
Or this "frankencode":
(function(){
for(var i=0,frames=parent.frames,l=frames.length;i<l;i++)
{
if(frames[i].window===window)
{
return frames[i].window;
}
}
})();
If you have jQuery:
$('iframe[name="'+window.name+'"]',parent); //method 1
$('iframe[src="'+location+'"]',parent); //method 2
$('iframe',parent).filter(function(){ //a different method
return this.window===window;
}).eq(0);
And many more ways...
I want to know that is child popup completely lorded or not?
When i use internal pages of domain like test.html it working but when i am trying with external domain as in my code it not working . so is the any way to achieve this with JavaScript or Jquery.
I am writing code as following.
<script type="text/javascript">
var popup;
function test()
{
popup = window.open("http://dailyhoroscope.com/", "Popup", "width=300,height=100");
popup.onload = function()
{
// Do Somthing
}
};
</script>
If you do not have this onload declaration on the body, add it (or any event which you are trying to create a window with)
I have a page that loads few iframe's within itself.
Each iframe can invoke parent function.
For example like this:
$(document).ready(function() {
parent.test();
}
I want to be able to find which iframe invoked test function.
I've tried to play with calleer.called properties but the best I could get is the function that calling test().
In my case it was $(document).ready function.
Is there a way to get the name of iframe (or it's html name) which calling the function?
If you pass a parameter to the test function it will work:
$(document).ready(function() {
parent.test('name of this iframe');
}
OR even better
$(document).ready(function() {
parent.test(window.name);
}
Then you just need to use that value passed to the inside of the test function.
I have one entire html openning inside an iframe that contains a javascript function getData().Now I am not sure how to call getData() from outside that frame.Also is it possible to call it from an external javascript file ?
You can get a reference to the frame window object from the window.frames property. See https://developer.mozilla.org/en/DOM/window.frames
UPDATE:
You can access the global context of a named iframe with window[framename]. e.g:
<iframe src="data.html" name="data"></iframe>
<script>
var myData = window.data.getData();
</script>
Although you will need to make sure the iframe has loaded.
In jQuery you can use the contents method if you want access to the iframe DOM:
$("iframe").contents()
All this is assuming the frame hosted within the same domain.
UPDATE[2]:
You asked if it is possible to call the getData function from an external js file. The answer is yes (if I understand you correctly). Here is an example:
<html>
<head>
<meta charset="utf-8">
<title>parent page</title>
</head>
<body>
<iframe src="data.html" name="data"></iframe>
<script src="getdata.js"></script>
</body>
</html>
Then in the getdata.js file you have:
var dataFrame = window.data;
// when the frame has loaded then call getData()
dataFrame.onload = function () {
var myData = dataFrame.getData();
// do something with myData..
}
Hope this answers your question :)
In certain situation there could be a neccessity of calling a javascript function inside an iframe from the parent document, and vice versa ie;
calling a javascript function in parent document from the iframe.
For example; the parent document have an iframe with id attribute ‘iFrameId‘, and the function ‘functionInIframe()‘ is defined in that iframe document.
Following code can call that iframe function from the parent document itself.
document.getElementById('iFrameId').contentWindow.functionInIframe();
And following code can call the function defined in parent document(functionInParent()) from the iframe itself.
parent.functionInParent();
This way javascript can interact between parent document and iframe.
This is the original post.
in these cases you name your iframe and the main body that uses/launches frame and then use parent.objectname, in JS everything is Object and you should be able to call getData()
a quick googling led me to this -> http://www.esqsoft.com/javascript_examples/iframe_talks_to_parent/