Twitter引导模式外部URL不起作用 [英] Twitter bootstrap modal external urls are not working
问题描述
Twitter引导模式不会在模式内部加载外部URL.
Twitter bootstrap modal doesn't load external urls inside modal.
示例代码: jsFiddle
<a data-toggle="modal" class="btn" href="http://stackoverflow.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
</div>
</div>
推荐答案
这不起作用,因为您违反了相同的原始政策限制,阻止您发送跨域AJAX请求,这是引导程序在此处使用的内容.因此,一种可能性是将外部内容加载到<iframe>
:
This doesn't work because you are violating the same origin policy restriction that prevents you from sending cross domain AJAX requests which is what bootstrap is using here. So one possibility is to load the external content into an <iframe>
:
$('a.btn').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('.modal-body').html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
});
请注意,某些网站(例如google,stackoverflow,facebook等)无法加载到iframe中.他们将X-Frame-Options
响应HTTP标头设置为SAMEORIGIN
,还检查是否将它们加载到iframe
内部.
Be warned though that some sites (such as google, stackoverflow, facebook, ...) cannot be loaded into an iframe. They are setting the X-Frame-Options
response HTTP header to SAMEORIGIN
and also check if they are loaded inside an iframe
.
您可以在此小提琴中看到它的作用: http://jsfiddle.net/f2Fcd/
You can see it in action in this fiddle: http://jsfiddle.net/f2Fcd/
这篇关于Twitter引导模式外部URL不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!