Menu
I have the following structure.
<div> <p>Hello World !!</p> </div> <iframe id="myiframe" src='myiframeContent.html'></iframe> and I have the following JavaScript variable with content:
var s ="<html><head></head><body><div>Test_Div</div></body></html>"; How can I change the content of iframe with id myiframe with variable s?
I tried:
$("#myiframe").html(s); Which giving me a very unusual return, it changes all the content of Current page to VAR S Ex : styles,background etc..
How can I set the content of an iframe with a variable that contains HTML?
The content of variable s follows:
<html> <head> <title>{page_name}</title> <meta name="keywords" content="{page_meta_tags}" /> <script src="/1.js"></script> <script src="/2.js"></script> <style> h2{ color:red;} h1{ color:red;} body{ background-color:#f0eded; color:74f503; font-family:Verdana, Geneva, sans-serif; background:url({getUrl});} </style> </head> <body> yahoo <div style="float:right">{pagecomment}</div> <div id="blogstart" style=""> <h1>My Blog</h1> {nextPrevPagination} {blog} {nextPrevPagination} </div> <p>My Page Name : {page_name}</p><br/> <p>Name of this template</p><br/> <p>Date started this page : {page_date}</p><br/> <label>Address</label> <textarea>{page_address}</textarea> <span>Country : {page_country} State :{page_state}</span> <p>page City : {page_city} Page Pincode {page_pincode}</p> <a href="mailto:{page_email}">Email me</a> {page_bio_title} and {page_bio_desc} <img src="{page_profile}" /> {page_avatar} <p>Contact me : {page_mobile} , {page_landline} </p> <a href="http://www.facebook.com/{page_facebook_user}">I am on Facebook</a> <a href="http://www.twitter.com/{page_twitter_user}"></a> </body> </html> After applying this variable to the iframe I got like this [inspected through firebug]
Note that it doesn't have BODY ,Head tag, but the above one [var s] has a BODY tag.
<html> <title>{page_name}</title> <meta content="{page_meta_tags}" name="keywords"> <style> h2{ color:red;} h1{ color:red;} body{ background-color:#f0eded; color:74f503; font-family:Verdana, Geneva, sans-serif; background:url({url});} </style> yahoo <div style="float: right;">{pagecomment}</div> <div style="" id="blogstart"> <h1>My Blog</h1> {nextPrevPagination} {blog} {nextPrevPagination} </div> <p>My Page Name : {page_name}</p><br> <p>Name of this template</p><br> <p>Date started this page : {page_date}</p><br> <label>Address</label> <textarea>{page_address}</textarea> <span>Country : {page_country} State :{page_state}</span> <p>page City : {page_city} Page Pincode {page_pincode}</p> <a href="mailto:{page_email}">Email me</a> {page_bio_title} and {page_bio_desc} <img src="{page_profile}"> {page_avatar} <p>Contact me : {page_mobile} , {page_landline} </p> <a href="http://www.facebook.com/{page_facebook_user}">I am on Facebook</a> <a href="http://www.twitter.com/{page_twitter_user}"></a> </html> 
823
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 most often used to embed specific content from one web page — like a video, form, document, or even a full web page — within a different web page. This is a powerful capability in HTML — you can take any content from any website (with permission) and place it on your own site to enhance your content.
I managed to do it with
var html_string= "content"; document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string); 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