Question

我在谷歌地图中有一个名为iframe.php

的漂亮的iframe 3d视图

<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中的ajax之后加载它

<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（显示纯文本）并且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>

在jquery追加后加载谷歌地图iframe

1 个答案: