2015-02-03 8 views
1

Я не понимаю, почему он не работает.Сгенерировать iframe и содержимое с помощью jQuery

У меня есть сценарий remote.php

<?php echo "Hello World"; ?> 

и А local.php сценарий

<html> 

<head> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { document_ready(); }); 

     function document_ready() 
     { 
      $('#vcc').click(function() { get_ajax() }); 
     } 

     function get_ajax() 
     { 
      $.ajax({ url:"remote.php",context:document.body}) 
      .done(function(response,context) { get_ajax_done(response,context); }); 
     } 
     function get_ajax_done(response,context) 
     { 
      $('<iframe id="myFrame" style="background-color: #FFFFFF"/>').appendTo('#someDiv'); 
      $('#myFrame').contents().find('body').append(response); 
      $('#someDiv').addClass('done'); 
     } 

    </script> 
</head> 

<body> 

<div id="someDiv"></div> 
<div> 
    <input type="submit" id="vcc" value="Go"></input> 
</div> 

</body> 

Это работает. Нажав кнопку, сделайте ajax-вызов и получите Hello World, iframe создан, а ss виден, но ничего не содержит.

Если я ставлю (с поджигатель) в контрольной точке на

$('#myFrame').contents().find('body').append(response); 

затем F10, содержание появляется и остается после F8!

+2

Его в основном получить звонок? Почему вы не можете добавить src = "url" в iframe? – Jango

+0

Потому что это упрощенный пример. У меня что-то более сложное с почтовым звонком. Но основная проблема остается прежней. Вопрос не в том, почему я это делаю, но почему он не работает. – tweetysat

+0

У вас есть какие-либо css, связанные с вашим html – Outlooker

ответ

2

вы должны вставить вам ответ, когда кадр загружен:

function get_ajax_done(response,context) 
    { 
     $('<iframe id="myFrame" style="background-color: #FFFFFF"/>') 
     .appendTo('#someDiv') 
     .on('load', function(){ 
      $(this).contents().find('body').append(response); 
      $('#someDiv').addClass('done'); 
     }) 
    } 
+0

Большое спасибо. Он работает нормально. Как решение Sandeeproop, но я предпочитаю ваш. – tweetysat

2

Я предполагаю, что основная проблема заключается в том, что вы не предоставляете браузеру некоторое время для рендеринга iframe в DOM.

Просто замените этот код

$('#myFrame').contents().find('body').append(response); 
$('#someDiv').addClass('done'); 

С этим

setTimeout(function(){ 
    $('#myFrame').contents().find('body').append(response); 
    $('#someDiv').addClass('done'); 
},100); 

Надеется, что это помогает

проверить это fiddle

+0

ДА! Работает. Большое спасибо. Но ... Я думаю, что решение Андрея «лучше», потому что ваш ждет какое-то время, а не просто время для загрузки. – tweetysat

+0

Я также почувствовал, что именно поэтому я дал ему преимущество. – Sandeeproop

Смежные вопросы