負荷谷歌地圖的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>