Twitter Bootstrap 以编程方式打开远程 URL答案

【问题标题】：Twitter Bootstrap open remote URL programmaticallyTwitter Bootstrap 以编程方式打开远程 URL
【发布时间】：2012-10-08 11:48:55
【问题描述】：

<div class="modal hide fade" id="modal_window">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

这是我的html代码，

我想将远程内容加载到其中，比如说 yahoo.com

我试过了

$('#modal_window').attr('data-remote', 'http://www.yahoo.com').modal({show:true, remote:true});

它显示正常的模态内容，而不是加载到模态的雅虎。如何将 yahoo.com 加载到模态窗口中？

http://jsfiddle.net/UXU2K/1/

谢谢

【问题讨论】：

它与拼写modal_win vs modal_window有关吗？
不，它是正确的，我把它放在这里时拼错了。感谢您的关注。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

通过 Javascript 加载远程数据的两种方法是从 AJAX 或通过设置 iFrame 的 url。 iFrame 适用于您想要加载整个网站的情况。我会假设你不想要那个。您使用的是 jQuery，所以这里是他们的 ajax 方法 http://api.jquery.com/jQuery.ajax/ 的文档。

下面是使用 jQuery 的 ajax 方法加载远程数据的代码：

    $.ajax({

       url: 'http://www.yahoo.com',
       type: 'GET',
       success: function(data) {

          $('#modal_body').append(html);

       }

    });

顺便说一句，如果您正在加载 HTML（与纯文本相反）并希望将其注入 modal_win 元素，请在成功方法中使用以下代码，而不是我上面的代码：

$(html).appendTo('#modal_body');

【讨论】：

【解决方案2】：

传入remote: true 是无效的语法，因为您正在设置数据属性。如果你删除它，你会看到这个错误：

XMLHttpRequest 无法加载 http://www.yahoo.com/。 Access-Control-Allow-Origin 不允许来源http://fiddle.jshell.net。

如果该页面与您的网站位于同一域中，它将起作用。否则，您将需要使用 iFrame，但这取决于您的应用程序。

【讨论】：

此外，Yahoo 可能有脚本来阻止您这样做。