Fetching inner element of Iframe - javascript

I have a simple html page. It has a iframe to some other site. I want to change the color of anchor tag that is nesteed in that Iframe. is is possible to access Elements of Iframe via javascript

If the other page is in another domain, due to cross-domain security, it will not be possible to edit HTML content of an iframe from the main page.
There are workaround for this, such as writing the change you want to make in the url. But this is really dirty.
If it is in the same domain, i suggest using, as example:
$('div', $('iframe')[0].contentWindow.document)
for getting all div elements inside your iframe

I did it by using following code
function loadFrame(){
document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue';
}

You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')

You can get the values of the elemets inside the iframe using
$('#iframeId').contents().find('#id-of-element-inside-iframe');
But the values cannot be altered.

There is just one simple solution, which will only work when you own the content in the iframe.
In your parent source add:
<script type="text/javascript">
var innerDocument = null;
</script>
In your iframe add:
<script type="text/javascript">
parent.innerDocument = document;
</script>
When the iframe is loaded you can now target the iframe's document by using innerDocument.
This circumvents the cross-domain security.

Related

Wrap iframe with a custom div

I'm using summernote with video plugin and would like to wrap the video iframe with a custom div. It is possible?
There is a method to detect when a content is inserted?
Check out this SO answer: jQuery/JavaScript: accessing contents of an iframe
In summary,
The contents of the iframe must be from the same domain as your website, or you will be limited due to the same origin policy.
If you have jQuery, you can access the contents of an iframe like so (where iframeid is the id property of the iframe element:
$("#iframeid").contents().find("#someDiv")
If you don't have jQuery, you can try:
myiframe.contentWindow.document
where myiframe is the target iframe DOM element.
Addendum: You may want to check if the iframe has loaded. With jQuery:
$("#iframeid").ready(function () {
//Do stuff in here
});

how to hide an iframe if content is empty

I am using iframe in which I am displaying some content from external url. I want to hide the iframe if there is no content to display (i.e empty). please let me know how to do this.
If you want to check content from external url inside iframe is empty, and the iframe is not cross-domain you could check for the existence of the body tag inside of the iframe. If it exists, then something loaded. Well if you can use jQuery, check it's length property. This is cross-browser compatible. If it's zero, it doesn't exist.
CODE:
if($("#iframeid").contents().find("body").length) {
// some html page loaded in iframe
}
If the iframe is cross-domain, you will be blocked by the same-origin policy. Otherwise this will work.
SOURCE: How to check if iframe is empty/null/undefined?
Use Jquery .content() to evaluate the content of the iframe and .hide() to hide it.
If you want to show it again latter use .toggle() instead.
No.
This cannot be done by a script on the calling page. The calling page will not be able to access the external document object loaded inside the iframe due to cross-domain security restriction.

Get content of an iframe after it loads with

I want to achieve the fallowing goal.I want by the click of a button to get the domain name entered in one input and load it into an iframe. What i have trouble with is after i load the specific site in the iframe how can i get the DOM of the loaded site in the iframe ? I need to save the exact path of an element of my choosing from the newly loaded site in the iframe by clicking on it. Any help would be much appreciated. Thank you.
You can access the <iframe>'s contents via the contentDocument property.
var iFrameContent = $('myIFrame')[0].contentDocument;
$(iFrameContent).find('.mySelector').text();
I should also point out accessing the <iframe>'s contents can only be done if the src of the <iframe> is from the same domain as your script. If the src of the <iframe> is from any other domain, the browser will deny access to the <iframe>contents.
This is a CORS consideration.
UPDATE:
To get around the CORS limitation, you'll have to write a server-side proxy for the URL that is the src of the <iframe> (and it could be pretty simple).
If I were to do something like this in ASP.Net (as an example), I would write a web service that:
takes the actual URL as a String parameter.
Uses the HTTPWebRequest object (or similar) to get the URL contents.
Return it back to the browser.
Then you could set your <iframe> src to "http://mysite.com/getURLService?url=www.lalala.com" and get the contents because the contents are now delivered by "http://mysite.com".
You use .contents()
like $("iframe").contents().find(); etc

Load content into div of external html page with JQuery

Does anyone know how to load content into a div of external HTML page with jQuery?
Using $('#divname').html("content") only seems to be able to access div elements of the HTML page where the script is in.
If I understand correctly you want to change the content of a DIV of an external page like for example an iframe?
If so, this can't be done with simple jQuery due to security reasons
You can use load() to load all content , or target specific content from remote page into an element in local page. load() is an AJAX method. Do a little research on AJAX
$('#myDiv').load('remotePageUrl')
Or to only get part of the remote page
$('#myDiv').load('remotePageUrl #remotePageID')
API Reference: http://api.jquery.com/load/
Found it! This is what I needed:
access div in iframe parent
I thought I didn't matter that it was a child-parent relationship as long they were in the same domain, but apparently it does.
Thanks for the responses!
$.get("test.php", function(data){
$("div").html(data);
});

Can you select tags from another page?

If I have this page a.html that has all the jquery codes. And there is another page b.html that has only html tags. Is it possible to do something like:
alert( $('a').fromhref('b.html').html() );
Basically I want to select a tag from another page. I want to basically avoid the use of iframes and httprequests.
You can access parts of another page with jQuery, provided both pages are on the same domain, using load(), but this can only be done with an http request (though if the page is cached, it might not be necessary), as a brief example:
$('#idOfElementOnPageA').load('http://example.com/pageB.html #idOFElementOnPageB');
This will load the html of the element with an id of idOfElementOnPageB into the element with the id of idOfElementOnPageA.
But please note, this in no way avoids making a call to the server, though it does allow you to retrieve elements from another page without using iframe elements in your page.
References:
load().
The filename should be script.js instead of a.html, then, use the script tag.
Basically, something like this (in b.html):
<script src="script.js"></script>
As long as script.js is in the same folder as b.html.

Categories

Resources