Javascript 使用bootstrap 3.0模式在iframe中加载动态远程内容
我已经尝试了在其他问题和stackexchange上发布的一些建议,但没有任何东西能让我满意 我正在尝试将动态内容加载到模式中。具体来说,在iFrame中播放YouTube视频或Soundcloud音频。这样,任何访问该网站的用户都可以输入视频或音频链接。然后,模式将动态加载用户链接的内容。每个后续用户都可以在一个模式中看到彼此的链接。(每个用户的单独模态负载) 我不能让它正常工作。我创建了一个名为“modal.html”的单独html文件来测试这一点,其中包括一个带有适当YouTube/Soundcloud剪辑的iframe 我还对是否需要在标记中使用“data remote=”感到困惑,还是href就足够了?或者我使用第一个模式中的远程数据。或者两者都有,或者两者都有?两者都不起作用 这是我的密码:Javascript 使用bootstrap 3.0模式在iframe中加载动态远程内容,javascript,html,twitter-bootstrap,iframe,modal-dialog,Javascript,Html,Twitter Bootstrap,Iframe,Modal Dialog,我已经尝试了在其他问题和stackexchange上发布的一些建议,但没有任何东西能让我满意 我正在尝试将动态内容加载到模式中。具体来说,在iFrame中播放YouTube视频或Soundcloud音频。这样,任何访问该网站的用户都可以输入视频或音频链接。然后,模式将动态加载用户链接的内容。每个后续用户都可以在一个模式中看到彼此的链接。(每个用户的单独模态负载) 我不能让它正常工作。我创建了一个名为“modal.html”的单独html文件来测试这一点,其中包括一个带有适当YouTube/Sou
<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">×</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 -->
&时代;
情态标题
接近
保存更改
为什么数据远程
或href
都不能在youtube这样的远程网站上工作
Twitter bootstrap的模式使用AJAX通过dataremote
/href
加载远程内容。AJAX受到限制,因此访问具有不同来源(如youtube)的站点将产生以下错误:
请求的资源上不存在“Access Control Allow Origin”标头
因此,无论是数据远程
还是href
都不能满足您的需要
JSON:
如果您获得的是json数据,那么您可能会使用。但是,由于您需要来自youtube等网站的html而不是json,我们需要另一种方法:
使用
将适用于youtube和许多其他远程站点(即使这种隔离也不适用于所有站点,因为有些站点,如Facebook,通过将X-Frame-Options设置为“拒绝”,显式阻止iFrame)
将iframe用于动态内容的一种方法是:
1)在modal的主体内添加一个空的iframe:
<div class="modal-body">
<iframe frameborder="0"></iframe>
</div>
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>
如果需要显示预格式化的网页,则需要类似的内容
$('#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。可能是一篇旧文章,我不久前遇到了类似问题,我想按一个链接,将文本文件(或任何其他文件)的href传递到模式窗口内的iframe,我这样解决:
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});
}
函数loadiframe(htmlHref)//加载iframe
{
document.getElementById('targetFrame')。src=htmlHref;
}
函数unloadiframe()//只是为了好玩
{
var frame=document.getElementById(“targetFrame”),
frameHTML=frame.contentDocument | | frame.contentWindow.document;
removeChild(frameDoc.documentElement);
}
链接
&时代;
关闭
您可以试试
它支持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
您可以使用对象文字作为额外选项的参数
查看网站表单了解更多详细信息
最好,我正在使用htaccess格式化页面的url。我在js函数中输入url变量的链接遇到问题,因为我最终得到的是默认索引页面,而不是变量中指定的页面。您有什么建议吗。
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);