使用bootstrap 3.0模式加载iframe中的动态远程内容 [英] Using bootstrap 3.0 modals to load dynamic, remote content within an iframe

问题描述

我尝试了其他问题和stackexchange上发布的几条建议，但没有任何工作让我满意。

我正在尝试将动态内容加载到模式中。特别是，在iFrame中的YouTube视频或Soundcloud音频。因此，任何访问该网站的用户都可以输入视频或音频的链接。然后模态动态加载用户链接。每个后续用户都可以在模式内看到其他每个链接。 （为每个用户分别加载模态）

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

我也对我是否需要在标签内使用data-remote =感到困惑，或者href足够了吗？或者，我是否在第一个模式中使用数据 - 远程？或者两者兼有，或者两者兼有

这是我的代码：

 < a data-toggle =modalhref =modal.htmldata-target =＃myModal>点击我< / a> 
 
 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< h4 class =modal-titleid =myModalLabel>模式标题< / h4> 
< / div> 
< div class =modal-body> 
 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-primary>保存更改< / button> 
< / div> 
< / div><！ -  /.modal-content  - > 
< / div><！ -  /.modal-dialog  - > 
< / div><！ -  /.modal  - > 
  

解决方案

为什么 data-remote 或 href 在远程网站上工作

Twitter引导程序的模式使用AJAX通过 data-remote / href 加载远程内容。 AJAX受同源策略限制，因此访问不同来源的网站（例如youtube）会产生此错误：

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

所以数据远程或 href 都不会做你想要的。

JSON ：
如果您获得了json数据，那么您可能会使用JSONP 的。但是，既然你需要html而不是json，我们需要另外一种方法：

使用< iFrame>的解决方案 code>





< 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-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，$ b $'height'：height，
'width'：width}）; 
}）; 
  

3）将类和属性添加到模式对话框的锚标记中：

 < a class =modalButtondata-toggle =modaldata-src =http：// www。 youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0data-height = 320 data-width = 450 data-target =＃myModal>点击我< / a> 
  

使用YouTube的演示提琴

I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction.

I am trying to load dynamic content into a modal. Specifically, YouTube videos or Soundcloud audio within an iFrame. So that any user who visits the site, can enter links for videos or audio. The modal then dynamically loads that users links. Each subsequent user can see each others links, all within a modal. (separate modal loads up for each user)

I can't get this to work quite right. I have created a separate html file called "modal.html" to test this out, which includes an iframe with the proper YouTube/Soundcloud clip.

I am also confused about whether i need to use "data-remote=" inside my tag, or does the href suffice? Or do I use the data-remote inside the first of the modal. Or Both, or either? Neither has worked.

Here's my code:

<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 -->

解决方案

Why neither data-remote or href work on remote sites like youtube

Twitter bootstrap's modal uses AJAX to load remote content via data-remote/href. AJAX is constrained by the same origin policy so accessing a site with a different origin, like youtube, will produce this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

So neither data-remote or href will do what you want.

JSON: If you were getting json data then you could potentially use JSONP. But since you need html, not json, from sites like youtube we need another approach:

Solution using <iFrame>

An <iframe> will work for youtube and many other remote sites (even this solition doesn't work for all sites as some, like Facebook, explicitly block iframes by setting X-Frame-Options' to 'DENY') .

One way to use an iframe for dynamic content is to:

1) add an empty iframe inside your modal's body:

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

2) add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).

The attributes are then set on the <iframe> which causes the iframe to load the specified page.

$('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) add the class and attributes to the modal dialog's anchor tag:

<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

这篇关于使用bootstrap 3.0模式加载iframe中的动态远程内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！