使用bootstrap 3.0模式加载iframe中的动态远程内容

Question

我已经尝试了其他问题和stackexchange上发布的一些建议,但没有任何工作令我满意.

我正在尝试将动态内容加载到模态中.具体来说,iFrame中的YouTube视频或Soundcloud音频.因此,访问该网站的任何用户都可以输入视频或音频的链接.然后模态动态加载用户链接.每个后续用户都可以在一个模态中看到彼此的链接.(为每个用户分别加载模态)

我不能让这个工作得很好.我创建了一个名为"modal.html"的单独html文件来测试它,其中包含一个带有正确的YouTube/Soundcloud剪辑的iframe.

我也很困惑我是否需要在我的标签内使用"data-remote =",或者href是否足够？或者我在第一个模态中使用数据遥控器.或两者,或者其中之一？两者都没有奏效.

这是我的代码:

<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-     remote="modal.html" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

为什么没有data-remote或href远程YouTube等网站的工作

Twitter bootstrap的模式使用AJAX通过data-remote/ 加载远程内容href.AJAX受相同原始策略的约束,因此访问具有不同来源的网站(如youtube)将产生此错误:

请求的资源上不存在"Access-Control-Allow-Origin"标头

所以既不会data-remote也href不会做你想要的.

JSON:如果你获得了json数据,那么你可能会使用JSONP.但是因为你需要ht,而不是像youtube这样的网站,我们需要另一种方法:

解决方案使用 <iFrame>

一个<iframe>将适用于youtube和许多其他远程站点(即使这个解决方案也不适用于所有站点,因为有些像Facebook一样,通过将X-Frame-Options'设置为'DENY'来明确阻止iframe).

将iframe用于动态内容的一种方法是:

1)在你的模态体内添加一个空的iframe:

<div class="modal-body">
    <iframe frameborder="0"></iframe>
</div>

2)添加一些单击模式对话框按钮时触发的jquery.以下代码期望data-src属性中的链接目标和按钮具有类modalButton.您可以选择指定data-width和data-height- 否则它们分别默认为400和300(当然您可以轻松更改它们).

然后在其<iframe>上设置属性,使得iframe加载指定的页面.

$('a.modalButton').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                               'height': height,
                               'width': width});
});

3)将类和属性添加到模态对话框的锚标记:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

Demo Fiddle using youtube

Answer 2

如果你需要显示预先格式化的网页,需要这样的东西

$('#btn').click(function() {
    $.ajax({
        url: 'url-src/dialog.html',
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            if (data.check) {
                var $modal = $(data.dialog);
                $('body').append($modal);
                $modal.filter('.modal').modal();
            } else {
                alert(data.dialog);
            }

        }
    });

});

dialog.html的html

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Dialog</h3>
        </div>
        <div class="modal-body">
            <form role="form"  class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="mutual">Example: </label>
                    <div class="col-sm-6">
                        <input type="text" id="example-form" value="" class="form-control">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="edit-form"  data-id-mutual="" class="btn btn-primary">Save</button>
            <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这个html有一个表单示例,你必须在里面添加一个带有视频的html.