I was trying to manipulate HTML inside iframe using jquery-javascript, I am trying something like this
$(document).ready(function(){
$('#Selector', frames['nameOfMyIframe'].document).functionStuff();
});
But I am not able to get the contents of an iframe, I get the Undefined error if iFrame is not loaded completely and when it loads I am getting permission error
How can I resolve this issue and access iframe contents using jquery?
Answered by:- manish
Your issue of not able to access iframe elements using jQuery or javascript is related to same origin policy, that's why you are getting the permission error.
If the <iframe> is from the same domain, the elements are accessible using jQuery like
$("#iFrame").contents().find("#DivID").AnyFunction();
Or you can try this method which triggers after loading of iFrame gets complete
$(document).ready(function(){
//executes once the iframe has finished loading
$("#iframeID").ready(function () {
$('#Selector', frames['nameOfMyIframe'].document).functionStuff();
});
});
Above solution will resolve your loading issue, but it will not resolve cross-domain issue(permission error)
Answered by:- vikas_jk
You can try this code also
$(document).ready(function(){
$('#IfOfFrame').load(function(){
$('#IfOfFrame').contents().find('body').html('Your new HTML Here');
});
});
Answered by:- jon
Try using
var $iframe = $("#iframeID").contents();
$iframe.find('selector');
But your iframe content must be from same origin otherwise you will get error permission denied type error.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly