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.
Related
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
});
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
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.
I am loading a HTML page inside an tag, Since iPAD not supporting iFrame i am using the tag to load External html pages inside a container. Everything works fine, Now i want to call a function from a Loaded Page (Page which loaded inside ). Can any one help me to find out the solution ?
"<object id='page' width='100%' height='100%' data='"+pageURL+"' style='position:absolute;'></object>";
Finally i GOT the Solution for accessing the Javascript function of HTML page loaded inside Object Tag.
window.objectID.functionName();
This will call the function ("But it is not working in IE8"). Use iframe for IE.
If you mean you want your code to call a JavaScript function in the context of the loaded page, you can't if the pages aren't from the same origin (which from the sound of it, they aren't). It's prohibited by the Same Origin Policy. The JavaScript code in your page can't interact with the other page.
If the pages are from the same origin, the object element's contentWindow and contentDocument properties are supposed to provide access to it, although I haven't used them on object elements and don't know how well-supported they are.
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.