使用 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 受 same origin policy 的限制，因此访问具有不同来源的网站（例如 youtube）会产生此错误：

请求的资源上没有“Access-Control-Allow-Origin”标头

所以data-remote 或href 都不会做你想做的事。

JSON： 如果您正在获取 json 数据，那么您可能会使用JSONP。但是由于您需要来自 youtube 等网站的 html，而不是 json，我们需要另一种方法：

使用<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。

Answer 3

可能是一篇旧帖子，前段时间我遇到了类似的问题，我想点击一个链接，它将文本文件（或任何其他文件）的 href 传递给模态窗口内的 iframe，我解决了这个：

function loadiframe(htmlHref) //load iframe
{
document.getElementById('targetiframe').src = htmlHref;
}


function unloadiframe() //just for the kicks of it
{
var frame = document.getElementById("targetiframe"),
frameHTML = frame.contentDocument || frame.contentWindow.document;
frameHTML.removeChild(frameDoc.documentElement);	
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<a class=" btn btn-danger" onClick="loadiframe('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css')" data-toggle="modal" data-target="#myModal">LINK</a><!--link to iframe-->




<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" style="border:hidden">
        <button type="button" class="close" onClick="unloadiframe()" data-dismiss="modal" aria-label="Close"><span aria-   hidden="true">&times;</span></button>
      </div>
      
      <div class="modal-body" style="padding-top:10px; padding-left:5px; padding-right:0px; padding-bottom:0px;">
        
      <iframe src="" frameborder="0" id="targetiframe" style=" height:500px; width:100%;" name="targetframe" allowtransparency="true"></iframe> <!-- target iframe -->
        
      </div> <!--modal-body-->
      
      <div class="modal-footer" style="margin-top:0px;">
        <button type="button" class="btn btn-default pull-right" data-dismiss="modal" onClick="unloadiframe()">close</button>
      </div>
      
    </div>
  </div>
</div>

所以在这种情况下，您只有一个模态框，一个 iframe，您可以加载和卸载它们。

Answer 4

你可以试试this bootstrap helper to dialogs

支持ajax请求、iframe、常用对话框、确认提示！

您可以将其用作：

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.prompt('Form question', 'This is a ajax', theMandatoryCallback);

这会在加载 iframe 时提供加载进度！

不需要 html。

您可以使用对象字面量作为额外选项的参数。

查看网站表单了解更多详情。

最好的，

Answer 5

function javascript_function(item_code)
{
var d = new Date();
var url_to_zoom='http://localhost.com/application/page.php?id=2&item_code='+item_code+'&reqdate='+d.getTime();

$('#modal_box').modal({keyboard:true,backdrop:true,show:true,remote:url_to_zoom});
}