how to change iframe content body html using jquery?

Hi,

It should be in this form-
$('#prev').contents().find('body').html('<div> blah </div>');

Hi rikin_shah,

I have multiple iframes in that page. That's why I am checking

$("iframe[src='"+curFrame+"']").contents().find("body").html(curCont);

Select allOpen in new window

So please suggest any other solution.
Regards,
John.A

The problem is, it's deemed a security issue to access the contents of an iframe hence why nothing is happening.it's called cross site scripting. What are you trying to achieve by this?

Hi tagit,

I have loading the html file from remote server using ajax and append the result in dynamically created "iframe" element.
On click of the 'library-edit-btn' button, I have enable HTML5 contenteditable option to edit that html file.
On click of the 'library-save-btn' button, I have created dynamic form elements with values and post the form using ajax to update that html file.
All these works fine for me. Server side files are updated.
But I refresh my page, updates are gone in client side. So I have created local storage to save and replace these values in client side to show updated html page.
Please advice is there any other work around to achieve this?
Regards,
John.A

Ok so you're creating an inline html editor in the browser?  

If I get a good idea about what you're doing I may be able to suggest another way about going about this.  It's starting to sound like a CMS (Content Management System).

What kind of content are your clients updating?  Is it just editing text, images and formatting or are they creating "webpages"?

It is simple html pages like text and images.

Have you looked at using Wordpress or Joomla?  They provide really user friendly interfaces for editing online content such as webpages.  It may seem like a bit more effort now but it will save you time later on.
If not, I'm more than happy to work through this with you.

I have heard wordpress and joomla templates. But I am new to these type of CMS. I will try to learn those technologies near future. If you have another option, please suggest that also.

One more question before proceeding, is the html file you're loading on the same domain as your edit page?

eg

you're wanting to edit this file
www.yourdomain.com/websites/html1.htm

and your edit script is
www.yourdomain.com/edit.php

What I'm getting it is you should be able to achieve what you're after if the "Same Origin" rules are satisfied: http://javascript.info/tutorial/same-origin-security-policy

Yes, Loading and editing html page in same domain.

Have a look at the link of the tutorial on how to do this.  Did you set the document.domain property?

I have used document.domain property as below. But chrome throws error like Uncaught SecurityError: An attempt was made to break through the security policy of the user agent.
Please advice. Also didn't update local storage value.

if (localStorage.getItem('flag')) {
var count = localStorage.getItem('wrapcount');

document.domain = document.domain + '/epubapp/LoginSystem/';

for (var i = 1; i<=count; i++) {
var curFrame = localStorage.getItem('curhtmlpath'+i);
var curCont = localStorage.getItem('curhtmlbody'+i);
//alert(curCont);
$("iframe[src='"+curFrame+"']").contents().find("body").html(curCont);
}

}

Select allOpen in new window