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

2022-01-17 00:00:00 iframe modal-dialog javascript html twitter-bootstrap

我已经尝试了这里发布的关于其他问题和 stackexchange 的一些建议，但没有任何内容让我满意.

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

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

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)

我无法让它正常工作.我创建了一个名为modal.html"的单独 html 文件来测试它，其中包括一个带有正确 YouTube/Soundcloud 剪辑的 iframe.

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.

我也很困惑我是否需要在我的标签中使用data-remote="，还是 href 就足够了?还是我在第一个模态中使用数据远程.或者两者，或者两者之一?两者都没有奏效.

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.

这是我的代码:

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

推荐答案

为什么 data-remote 或 href 在 youtube 等远程站点上都不起作用

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

Twitter bootstrap 的模式使用 AJAX 通过 data-remote/href 加载远程内容.AJAX 受 same_origin_policy">same_origin_policy">same_origin_policy">same_origin_policy">same origin policy 的限制，因此访问具有不同来源的网站(例如 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:

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

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

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

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

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

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:

使用<iFrame>

<iframe> 适用于 youtube 和许多其他远程站点(即使此解决方案也不适用于所有站点，因为某些站点，例如 Facebook，通过设置 X-Frame- 明确阻止 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') .

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

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

1) 在模态框的正文中添加一个空 iframe:

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

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

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

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

然后在 <iframe> 上设置属性，这会导致 iframe 加载指定的页面.

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) 将类和属性添加到模态对话框的锚标记:

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>

使用 youtube 演示小提琴

相关文章