is there any way how to access from iframe to parrent page (and change parrent page)?
<body>
<iframe src="frame1.html" name="frame1" height="100%"></iframe>
<div id="test1"></div>
</body>
In frame1.html is <a href=..> and I want to add text "<h1>clicked</h1>" into <div id="test1"></div>, when the <a href..> was clicked.
Thanks.
If your child page (frame1.html) is located at the same domain as the parent page, You can write a code like below in the child window :
$('#test1', parent.document).html('<h1>clicked</h1>');
The second parameter provides the context in which to search the element matched by the first parameter. The Document is here:http://api.jquery.com/jQuery/#jQuery-selector-context
jQuery( selector [, context ] )
So, your code (frame1.html) could go like this:
<a href="..."
onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a>
Hope this helps.
Important note: Accessing in and out iframes is only possible, if both, parent and iframe are from the same domain, else you have no access due to Same Origin Policy.
Note, that both parts have their own document. Accessing the parent object from iframe is simple with
parent.document
and from parent it is one of the following:
window.frames['iframeName']
(window.frames.length /*gives you the number of iframes in your document*/ )
or reference it with id and do the following (watch out for support!)
var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document;
The code below should work fine:
$(parent.document).find("#selector");
The selector is from the parent document to perform some action. For Example:
$(parent.document).find("#selector").remove();
Related
I am trying to read the particular contents of an child IFrame wrapped in a div tag from parent window. I am using
detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
with this I'm able to access the entire content of that frame. But I need to access only a portion of that content. The problem is that the div which wraps the content that I am looking for contains only class and no ID.
<div class="watINeed"> <table class="details"> </table> </div>
I am unable to access the content which is in a form of table (with no id and only class).
Any help.
Edit1: I need to access the content of the table to check for char length and also for some html tags present in that content.
You can do this either using plain Javascript (as mentioned by Notulysses):
window.frames['myIframe'].document.querySelector('.watINeed .details')
or using jQuery (since you aded jquery) by specifying the iframe's document as context to $:
$(".watINeed .details", window.frames['myIframe'].document)
In the latter case you've a fullfeatured jQuery object.
Note that in either case the iframe's document has to be on the same domain otherwise you'd run into cross origin issues.
Tested against jQuery 2.0.x
Update
If you're running the selector during page load of the including page, you'll have to listen to the load event of the iframe before accessing its content:
$(window.frames['myIframe']).on("load", function(){
// above query here
});
If your are looking for a vanilla Javascript, and your target div is a direct children of starting selector, it is a simple task
var detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
var target;
for(var i = 0; i< detailsValue.children.lenght; i ++){
if(detailsValue.children[i].getAttribute('class')== 'watINeed'){
target = detailsValue.children[i] ;
}
}
otherwise, have to write a recursive method to scrap all children of structure
As i wrote above, it can be done using the following:
document.querySelectorAll(".className")[0] or $(".className")[0]
those are basically the same as both return a list of nodes and the [0] simply means taking the first result from the list.
there are 2 things to pay attention to:
the iframe loads the content asynchronously therefore when you execute the query its most likely that the elements you are searching for did not load yet.
executing the code after DOM loads is not enough.
the solution is simply put your code in a block that executes once all the asynchronous content is loaded:
window.onload=function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
});
the second thing is, according to the page Here, you can access the iframe's document using contentWindow.document:
window.onload=function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
});
live example: Fiddle
I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks
x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")
You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>
Good day to all.
I have this setup:
One page with text/whatever, that also includes an iframe (the page in iframe is created by me so I have access to it, I can modify its content).
What I need to do is that when I access a link from the iframe to open it on the mother page (navigate).
Until now I kind of failed to do that so any help would be appreciated.
For any further info just ask.
In all of the links that you want to affect the parent window do something like this:
GO THERE!
Or with javascript:
<a href="javascript:window.parent.location = 'somthing.html';" >GO SOMEWHERE!</a>
If all you need to do is change the parent window's location from inside the iframe, it is very simple:
window.parent.location = 'newWindow.html';
Or if you are using a link, just use it's "target" attribute.
You should use the target attribute <a href="" target="...">
For all the possible values of target, you can go here.
Let me preface this with... I have referenced this question/answers and it seems to contain clues, but i'm still missing the whole picture
Run JQuery in the context of another frame
Essentially, the structure of the index page is this
<html>
<body>
<div class="frames-wrap">
<iframe id="this-iframe" src="location.php">
</iframe>
</div>
</body>
</html>
location.php then contains a frameset (ahem, not my idea...) that has two frames that are set up like so...
<frameset cols="350,*">
<frame src="search.php" id="frame_search" name="search"/>
<frame src="edit.php" id="frame_edit" name="edit" />
</frameset>
if i want to manipulate objects between the index page and these elements how would i go about this?
I keep thinking the context should be something similar to window.parent.frames[0].document... what else am i missing?
Preface: You wont be able to access the iframes contents unless it originates from the same domain.
To select elements in your iframe you could use a jQuery call like this
element = $("#this_iframe").contents().find("#frame_search")
The key is to use the contents() function. See Traversing/contents
I think the link from technicolorenvy has the answer, but the selector has a lesser known second parameter where you can set the context.
Something like this:
var iframeDoc = document.getElementById('myIframe');
iframeDoc = (iframeDoc.contentWindow) ? iframeDoc.contentWindow : (iframeDoc.contentDocument.document) ? iframeDoc.contentDocument.document : iframeDoc.contentDocument;
// From the parent window
$('p', iframeDoc).html('Hello from parent');
http://docs.jquery.com/Core/jQuery#expressioncontext
Giving your frames ids that are valid JavaScript identifiers would help, then you could use constructs such as window.top.this_iframe.frame_edit.document as your context.
These were all helpful. I kept bombing when I was attempting to get past the iframe in the DOM. THis would appear to be from the fact i had code residing in the ready() method, but the frameset that was being called within the iframe was not loaded by the time that had $(document).ready() fired.
Thanks for all the great help and feedback!