使用引导程序 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="modal" href="modal.html" data-target="#myModal">点击我</a><div class="modalfade" 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">模态标题</h4>

<div class="modal-body">

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>

</div><!--/.modal-content --></div><!--/.modal-dialog --></div><!--/.modal -->

解决方案

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

Twitter 引导程序的模态使用 AJAX 通过 data-remote/href 加载远程内容.AJAX 受同源政策的约束，因此访问具有不同来源的网站(如 youtube)会产生以下错误:

<块引用>

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

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

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

使用