Установить содержание iframe - PullRequest
Новая
       6

Установить содержание iframe

46 голосов
/ 23 ноября 2011

У меня следующая структура. 

<div>
<p>Hello World !!</p>
</div>
<iframe id="myiframe" src='myiframeContent.html'></iframe>

и у меня есть следующая переменная JavaScript с content: 

var s ="<html><head></head><body><div>Test_Div</div></body></html>";

Как мне изменить содержимое iframe с идентификатором myiframe с переменной s?

Я пытался: 

$("#myiframe").html(s);

Что дает мне очень необычное возвращение, оно меняет все содержимое текущей страницы на VAR S Пример: стили, фон и т.д ..

Как я могу установить содержимое iframe с помощью переменной, содержащей HTML?

Обновление # 1

: содержимое переменной s следует -> 

 <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>

После применения этой переменной к iframe я получил это [проверено через firebug]
Обратите внимание, что у него нет тега BODY, Head, но у вышеупомянутого [var s] есть тег 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>

Ответы [ 8 ]

91 голосов
/ 30 ноября 2011

Мне удалось сделать это с 

var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);
27 голосов
/ 23 ноября 2011

Используйте функцию «содержимое»: 

$('#some-id').contents().find('html').html("some-html")

Соответствующая скрипка: http://jsfiddle.net/fDFca/

10 голосов
/ 29 сентября 2017

Унифицированное решение:

Чтобы работать во всех современных браузерах, вам потребуется два шага:

  1. Добавьте javascript:void(0); как атрибут src для элемента iframe. В противном случае содержимое будет переопределено пустым src в Firefox. 

    <iframe src="javascript:void(0);"></iframe>

  2. Программно изменить содержимое внутреннего html элемента. 

    $(iframeSelector).contents().find('html').html(htmlContent);

Кредиты:

Шаг 1 из комментария ( ссылка ) @ susan

Шаг 2 из решений ( link1 , link2 ) от @erimerturk и @ x10

8 голосов
/ 23 ноября 2011 
$('#myiframe').contents().find('html').html(s);

Вы можете проверить здесь http://jsfiddle.net/Y9beh/

4 голосов
/ 08 февраля 2014

Почему бы не использовать 

$iframe.load(function () {
    var $body = $('body', $iframe.get(0).contentWindow.document);
    $body.html(contentDiv);
});

вместо таймера?

3 голосов
/ 04 июля 2018

Мне нужно было повторно использовать один и тот же iframe и каждый раз заменять содержимое.Я пробовал несколько способов, и это сработало для меня: 

    // clear content 
    element.src = "about:blank";
    // write new content
    element.contentWindow.document.open();
    element.contentWindow.document.write(newHtml);
    element.contentWindow.document.close();
1 голос
/ 23 ноября 2011

Вам нужно - 

var $frame = $('myiframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<div>Test_Div</div>');
    }, 1 );

Код взят из - размещение html внутри фрейма (с использованием JavaScript)

0 голосов
/ 23 ноября 2011

Попробуйте создать объект DOM следующим образом: 

var s = $('<html><head></head><body><div>Test_Div</div></body></html>');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...