将 HTML 文件加载到 Bootstrap 模式中

Question

我正在尝试制作一个包含动态加载内容的模式。这是我的 JavaScript 代码：

function track(id,title) {
    $('#listenTrack').modal('show');
    $('#listenTrack').find('.modal-title').html(title);
    $.get("remote.html", function(data) {

        $('#listenTrack').find('.modal-body').html(data);

    });
}

这里是remote.html

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<script type="text/javascript">var zippywww="26";var zippyfile="9k9lOOtw";var zippytext="#C9302C";var zippyback="#161617";var zippyplay="#ff6600";var zippywidth=320;var zippyauto=false;var zippyvol=80;var zippywave = "#C9302C";var zippyborder = "#cccccc";</script>
<script type="text/javascript" src="https://api.zippyshare.com/api/embed_new.js"></script>
</html>

我也尝试过不使用 html 标签，但没有成功。 文本内容出现，而不是播放器。如果我直接从浏览器打开 remote.html 一切都很好。也许我的代码有误。

Answer 1

这是一个高度跨浏览器兼容的解决方案。它使用 XMLHttpRequest 对象的 open 方法通过 HTTP GET 方法打开您的 "remote.html" 文件。第三个参数true表示请求是异步的

如果加载没有错误（带有 HTTP OK 响应），请使用 "remote.html" 的 HTML 内容填充 listenTrack div。

var xhr= new XMLHttpRequest();
xhr.open('GET', 'remote.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return;
    document.getElementById('listenTrack').innerHTML= this.responseText;
};
xhr.send();

我再说一遍，这是高度交叉兼容的（除了几个旧版本的 IE，现在不再需要了）甚至不需要 jQuery 或任何其他 javascript 库。

Answer 2

正如我在您的解决方案中看到的那样，我注意到您没有加载 boostrap.js 文件，除非这段代码不是您的全部代码段。

这是一个对我有用的简单解决方案：

<!DOCTYPE html>
<html>
<head>
    <title>title </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>



<div class="modal fade" id="modal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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 -->

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<script>
(function(){
    // 1 :the content that we want to inject inside our modal 
    //  this content can be loaded from another external file, this is just an example 
    var content = {title:"this is the title ",body:"this is the body content"};

    // reference my modal 
    var modal1=$('#modal1');
    // use `.html(content)` or `.text(content)` if you want to the html content 
    // or text content respectively.
    $(modal1).find('.modal-title').html(content.title);
    $(modal1).find('.modal-body').html(content.body);

    // show the modal 
    $(modal1).modal();


})();   

</script>
</body>
</html>

本例中使用的模态来自bootstrap官网：http://getbootstrap.com/javascript/#modals

不要忘记先加载jquery，因为bootstrap依赖它。其次加载您的 bootstrap.js，不要忘记 头部部分 中的 bootstrap.css。

将 HTML 文件加载到 Bootstrap 模式中

Load HTML file into a Bootstrap Modal

javascript

ajax

jquery

bootstrap-modal