javascript 将 HTML 文件加载到 Bootstrap Modal 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31629281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load HTML file into a Bootstrap Modal
提问by bystefu
I'm trying to make a modal with dynamically loaded content. This is my JavaScript code:
我正在尝试使用动态加载的内容制作模态。这是我的 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);
});
}
And here is remote.html
这是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>
I tried also without html tags, but nothing. The text content appears, not the player. And if I open remote.htmldirectly from the browser everything is fine.
Maybe my code is wrong.
我也试过没有 html 标签，但没有。出现的是文本内容，而不是播放器。如果我remote.html直接从浏览器打开一切都很好。也许我的代码是错误的。
回答by ismnoiet
As i see in your solution i can notice that you are not loading your boostrap.jsfile,unless this block of code is not your snippet in its totality.
正如我在您的解决方案中看到的那样，我可以注意到您没有加载boostrap.js文件，除非此代码块不是您的全部代码段。
Here is a simple solution that worked for me :
这是一个对我有用的简单解决方案：
<!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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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>
the modal used in this example is from the bootstrap official website : http://getbootstrap.com/javascript/#modals
本例中使用的modal来自bootstrap官网：http: //getbootstrap.com/javascript/#modals
Don't forget to load jquery first, because bootstrap depends on it.
Secondly load your bootstrap.jswithout forgetting bootstrap.cssin the head section.
不要忘记首先加载jquery，因为引导程序依赖于它。其次加载您bootstrap.js没有忘记bootstrap.css在头部分。
回答by Narendran Parivallal
Here is a highly cross-browser compatible solution. It uses the XMLHttpRequest Object's open method to open your "remote.html" file using HTTP GET method. The third parameter trueis to mark that the request as asynchronous.
这是一个高度跨浏览器兼容的解决方案。它使用 XMLHttpRequest 对象的 open 方法通过 HTTP GET 方法打开“remote.html”文件。第三个参数true是将请求标记为异步。
When loaded without errors (with an HTTP OK response), fill the listenTrackdiv with the HTML content of "remote.html".
当加载没有错误（带有 HTTP OK 响应）时，用“remote.html”的 HTML 内容填充listenTrackdiv。
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();
I repeat, this is highly cross-compatible (except few older versions of IE, which is now - no more) and doesn't even require jQuery or any other javascript library.
我再说一遍，这是高度交叉兼容的（除了少数旧版本的 IE，现在 - 不再），甚至不需要 jQuery 或任何其他 javascript 库。
