javascript - ejemplo - Establecer contenido de iframe
iframe video (8)
Tengo la siguiente estructura.
<div>
<p>Hello World !!</p>
</div>
<iframe id="myiframe" src=''myiframeContent.html''></iframe>
y tengo la siguiente variable de JavaScript con content :
var s ="<html><head></head><body><div>Test_Div</div></body></html>";
¿Cómo puedo cambiar el contenido de iframe con id myiframe con variable s ?
Lo intenté:
$("#myiframe").html(s);
Lo que me da un retorno muy inusual, cambia todo el contenido de la página actual a VAR S Ex: estilos, fondo, etc.
¿Cómo puedo establecer el contenido de un iframe con una variable que contenga HTML ?
Actualización # 1
: El contenido de la variable s sigue ->
<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>
Después de aplicar esta variable al iframe, obtuve así [inspeccionado a través de firebug]
Tenga en cuenta que no tiene BODY , Head tag, pero el anterior [var s] tiene etiqueta BODY .
<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>
Solución unificada:
Para poder trabajar en todos los navegadores modernos, necesitará dos pasos:
Añadir
javascript:void(0);como atributosrcpara el elemento iframe. De lo contrario, el contenido será reemplazado por elsrcvacío en Firefox.<iframe src="javascript:void(0);"></iframe>Programemente cambie el contenido del elemento
htmlinterno.$(iframeSelector).contents().find(''html'').html(htmlContent);
Créditos:
Paso 1 del comentario ( link ) por @susan
Paso 2 de las soluciones ( link1 , link2 ) por @erimerturk y @ x10
Intenta crear un objeto DOM así:
var s = $(''<html><head></head><body><div>Test_Div</div></body></html>'');
Logré hacerlo con
var html_string= "content";
document.getElementById(''output_iframe1'').src = "data:text/html;charset=utf-8," + escape(html_string);
Necesitaba reutilizar el mismo iframe y reemplazar el contenido cada vez. Lo intenté de varias maneras y esto funcionó para mí:
// clear content
element.src = "about:blank";
// write new content
element.contentWindow.document.open();
element.contentWindow.document.write(newHtml);
element.contentWindow.document.close();
Necesitas -
var $frame = $(''myiframe'');
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $(''body'',doc);
$body.html(''<div>Test_Div</div>'');
}, 1 );
Código tomado de - poner html dentro de un iframe (usando javascript)
Por qué no usar
$iframe.load(function () {
var $body = $(''body'', $iframe.get(0).contentWindow.document);
$body.html(contentDiv);
});
en lugar de temporizador?
Use la función "contenidos":
$(''#some-id'').contents().find(''html'').html("some-html")
Fiddle relevante: http://jsfiddle.net/fDFca/
$(''#myiframe'').contents().find(''html'').html(s);
puedes consultar desde aquí http://jsfiddle.net/Y9beh/