how to change iframe content body html using jquery?

Hi experts,

While refresh the page, I need to change localStorage value to iframe body html. I have used below code snippet. I have checked in chrome Dev tools, localStorage value set correctly. Also javascript alert function returns correct value. But page not updated. Please advice.
if (localStorage.getItem('flag')) {
var count = localStorage.getItem('wrapcount');

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);
}

}

Open in new window

Regards,
John.A
JohnLourduAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi,

It should be in this form-
$('#prev').contents().find('body').html('<div> blah </div>');
0
JohnLourduAuthor Commented:
Hi rikin_shah,

I have multiple iframes in that page. That's why I am checking
$("iframe[src='"+curFrame+"']").contents().find("body").html(curCont);

Open in new window

So please suggest any other solution.
Regards,
John.A
0
RobOwner (Aidellio)Commented:
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?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

JohnLourduAuthor Commented:
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
0
RobOwner (Aidellio)Commented:
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"?
0
JohnLourduAuthor Commented:
It is simple html pages like text and images.
0
RobOwner (Aidellio)Commented:
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.
0
JohnLourduAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
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
0
RobOwner (Aidellio)Commented:
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
0
JohnLourduAuthor Commented:
Yes, Loading and editing html page in same domain.
0
RobOwner (Aidellio)Commented:
Have a look at the link of the tutorial on how to do this.  Did you set the document.domain property?
0
JohnLourduAuthor Commented:
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);
}

}

Open in new window

0
RobOwner (Aidellio)Commented:
That's chrome saying you can't do it this way.
I would seriously look at removing the iframe idea and using php to serve only the body sections of the HTML page you want to edit and injecting that into a div.
I would also look at other inline editors such as ckeditor
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.