jQuery: changing iframe content

Question

As far as I can tell this code should work, but it doesn't and I'm totally stumped. Any thoughts?

jQuery

$('.article_chooser').click(function() {
    var src = $(this).attr('value');
$("#doc_edits_attributes_0_body").parent("iframe html body").html($("#article"+src).html());
console.log($("#doc_edits_attributes_0_body").parent("iframe html body").html());
});

HTML

<textarea class="editable_areas" cols="40" id="doc_edits_attributes_0_body" name="doc[edits_attributes][0][body]" rows="20" style="display: none;"></textarea>
<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0">
    <html>
        <body marginwidth="0" marginheight="0" contenteditable="true" class="editable_areas wysihtml5-editor" spellcheck="true">
        </body>
    </html>
</iframe>

Cheers!

You do of course realize that setting the security attribute to restricted, will disable all scripting in the iFrame for browsers that supports that attribute, and any attempt to use javascript on the iFrame will generally fail ? — adeneo, May 23 '13 at 01:41
Ah, right. I didn't realise. The iframe is created with a plugin. I guess I need to adjust it somehow. — t56k, May 23 '13 at 01:41

score 8 · Answer 1 · answered May 23 '13 at 01:24

8

To edit the content of an iframe you must call the body tag inside the iframe:

<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" id="iframe">
    <html>
        <body marginwidth="0" marginheight="0" contenteditable="true" class="editable_areas wysihtml5-editor" spellcheck="true">
        </body>
    </html>
</iframe>

<script type="text/javascript">
$(document).ready(function() {
    $('#iframe').contents().find('body').html('New Content');
});
</script>

answered May 23 '13 at 01:24

Niche

967
5
23

+1 for introducing me to the contents method to get the document element of an iframe http://api.jquery.com/contents/ hopefully I would not forget this niche function. – basarat May 23 '13 at 01:30
In my case that should translate to this: `$("#doc_edits_attributes_0_body").parent("iframe").contents().find('body').html($("#article"+src).html());`? I still get nothing. – t56k May 23 '13 at 01:31

Ram · Accepted Answer · 2013-05-23T01:54:39.587

2

wysihtml5 plugin has API, you can use getValue method:

var value = editorInstance.getValue();

Or if you want to set a value, you can use setValue method:

editorInstance.setValue('a string');

Or if you want to append html content you can use .exec() method:

editorInstance.composer.commands.exec("insertHTML", "<p>bar</p>");

edited May 23 '13 at 01:54

answered May 23 '13 at 01:44

Ram

143,282
16
168
197

So presumably `setValue();` would do the opposite, yeah? Are there docs available for the API? I can't find any. – t56k May 23 '13 at 01:49
1

@emm Yes, it does, actually I used `console.dir` for seeing what properties and methods it provides/supports, you can examine it's github wiki page https://github.com/xing/wysihtml5/wiki/ – Ram May 23 '13 at 01:52
This will work, I imagine, once I learn how to refer to each instance of the editor. Is it the ID of the textarea it's replacing? So in my example above it'd be `$("#doc_edits_attributes_0_body")`? The iframe code reveals no identifier. – t56k May 23 '13 at 01:57
@emm Well, you can store the returned object in a variable when you are initialising the plugin, then you can call the methods on that instance. – Ram May 23 '13 at 02:02
I'm about to show my ignorance here and confess that I've no idea what that means. Ha. – t56k May 23 '13 at 02:18
@emm Oh, sorry, I meant this: `var editor = new wysihtml5(...)`. – Ram May 23 '13 at 02:31
Ah, right! I've got `var cmon = $('.editable_areas').wysihtml5();` and `cmon.setValue($("#article"+src).html());`, but I get `Object has no method 'setValue'`. – t56k May 23 '13 at 02:40
Your answer coupled with [matyas](http://stackoverflow.com/questions/10739237/insert-html-programatically-in-wysihtml5-editor)' answer here works! – t56k May 23 '13 at 03:30

jQuery: changing iframe content

2 Answers2