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?
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)
You can try this code also
$(document).ready(function(){
$('#IfOfFrame').load(function(){
$('#IfOfFrame').contents().find('body').html('Your new HTML Here');
});
});
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