Menu
I am creating a in browser HTML editor. I am using the syntax highlighter called Code Mirror which is very good.
My setup is an iframe that holds a view of the page which is being edited and a textarea which the plain text HTML sits which the user edits.
I am trying to insert the edited HTML from the textarea into the iframe which displays they rendered HTML.
Is this possible? I have tried the following:
HTML setup:
<iframe id="render"> </iframe> <textarea id="code"> HTML WILL BE HERE </textarea> <input type="submit" id="edit_button" value="Edit" /> JQuery Setup:
$('#edit_button').click(function(){ var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area var iframe = $('#render'); iframe.html(code) }) This does not seem to load the HTML into the iframe, is there a special method to insert HTML into a iframe or is this not possible?
398
HTML Iframe SyntaxThe HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Answer: Use the jQuery contents() method You can use the jQuery contents() method in combination with the find() , val() and html() methods to insert text or HTML inside an iframe body.
Approach 1: For adding additional div's in an iframe, you need to use a wrapper div, that wraps the contents of your intended div and the iframe into one unit. This way you can display the contents of your div along with the iframe embedding to the document/webpage.
IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.
This problem bugged me too and finally found solution.
Its late but will add value to other visitors who might need proper fix.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>Iframe test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> </script> <script type="text/javascript"> $(function() { var $frame = $('<iframe style="width:200px; height:100px;">'); $('body').html( $frame ); setTimeout( function() { var doc = $frame[0].contentWindow.document; var $body = $('body',doc); $body.html('<h1>Test</h1>'); }, 1 ); }); </script> </head> <body> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
