Bootstrap的模拟框加载href时只显示第一次href的内容

本文介绍如何使用Bootstrap模态框加载JSP页面，包括解决浏览器阻止加载本地文件的问题，避免JS包冲突，以及确保模态框每次正确刷新加载的新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap模拟框嵌入jsp页面

如果电脑上没有web容器，浏览器会阻止模拟框加载href的界面。

百度上有说往浏览器快捷方式的属性的选项：目标之后加 --allow-file–access-from-files。但是我改过之后还是报错，可能是我的操作有问题，也可能是chrome修复这个不安全操作。

设置a标签href属性。

<a href="target.jsp" data-toggle="modal" data-target="#myModal" >target url = target.jsp</a>

<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<%@include file="target.jsp" %>
</div>

删除target.jsp页面上bootstrap.js的script连接，因为source.jsp和target.jsp的两个js包会冲突，导致在模拟框中不能显示页面。

解决模拟框只显示第一次显示的内容

本人理解：
 1. 模拟框第一次加载时，把target.jsp的内容存入modal的data属性中。
 2. 之后的每一次modal调用show方法都会检查data属性是否为null，
	如果不为null，就显示data的内容，否则就把新页面的内容存入
	modal的data属性中。
 3. 所以要解决modal只显示一次的情况需要每次modal调用hidden方法之后，
 	把modal的data属性清除。

在这里插入图片描述

这里一定是"hidden.bs.modal"

<script type="text/javascript">			
						
	$('#myModal').on("hidden.bs.modal", function() {
		$(this).removeData("bs.modal");
		$('.modal-content').children().remove();
	});
</script>

最后的代码

<a href="target.jsp" data-toggle="modal" data-target="#myModal" >target url = target.jsp</a>

<script type="text/javascript">			
						
	$('#myModal').on("hidden.bs.modal", function() {
		$(this).removeData("bs.modal");
		$('.modal-content').children().remove();
	});
</script>

<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<%@include file="target.jsp" %>
</div>