Twitter引导模式外部网址无法正常工作

Question

Twitter bootstrap模式不会在模态内加载外部URL.

示例代码: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>

Answer 1

这不起作用,因为您违反了相同的源策略限制,阻止您发送跨域AJAX请求,这是引导程序在此处使用的.所以一种可能性是将外部内容加载到<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.

你可以在这个小提琴中看到它的运作:http://jsfiddle.net/f2Fcd/