负荷谷歌地图的iframe追加

Question

我在谷歌地图这个漂亮的iframe 3D视图在一个名为iframe.php

<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2shk!4v1484532774391!6m8!1m7!1sOYCSnR8N9qoAAAQ7LsT_ew!2m2!1d22.27612005902588!2d114.1724398834276!3f285!4f0!5f0.7820865974627469" width="100%" frameborder="0" style="border:0" allowfullscreen></iframe> 

文件，我想在一个特定的div阿贾克斯之后加载这个当客户点击一个按钮

<a href="#">Load iframe</a> 
<div id="iframe"> 
</div> 

<script> 
$(document).on('click','a',function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: 'iframe.php' 
    }).done(function(iframe) { 
    $('#iframe').append(iframe); 
    }); 
}); 
</script> 

但是，这加载了html（show me plain text）并且iframe没有运行。我错过了什么？或者iframe只能运行onload？

Answer 1

尝试的.html（...），而不是.append（...）

此代码适用于YouTube视频：

<div id="frame"></div> 
<button id="btn-clickable">Clicke Me!</button> 

<script> 
    $(document).ready(function() { 
     $(document).on('click', '#btn-clickable', function() { 
      $('#frame').html('<iframe width="560" height="315" src="https://www.youtube.com/embed/U2SRUPbtVWQ" frameborder="0" allowfullscreen></iframe>'); 
     }); 
    }); 
</script>