Twitter 引导模式外部 URL 不起作用

问题描述

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 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！