在模态中的 div 内打开链接

Question

我有一个模态，其中有 2 个<a>标签。当用户单击链接时，应在相同模式的同一div 中打开链接，而不是在选项卡中打开。

为此，我尝试了：

$(document).ready(function() {
$("#help_modal a").each(function() {
$("#help_modal").load($(this).attr("href"));
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="help_modal">
<a href="https://google.com" class="btn btn-block btn-lg btn-primary">Open Google</a>
<a href="https://stackoverflow.com" class="btn btn-block btn-lg btn-secondary">Open Stackoverflow</a>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

但是链接在同一选项卡中打开...

更新

我也尝试过这个答案，但在此评论之后它也对我不起作用。

Answer 1

回答您的评论：

如果您在运行 JSFiddle 时检查控制台，它会说：

拒绝显示 "在模态中的div 内打开链接" 在框架中，因为祖先违反了以下内容安全性 政策指令："框架祖先'自我'"。

这意味着，

由于设置了内容安全策略，因此禁止在IFRAME中显示内容。托管 stackoverflow.com 的 Web 服务器配置为将 HTTP 标头添加到响应对象。具体来说，他们将Content-Security-Policy标签设置为帧祖先"self"。您无法使用 IFRAME 将他们的页面嵌入到您自己的页面中。

感谢提米B的回答。

---

回答您的问题：

学习者的答案也是一个不错的选择。(+1)

但我更喜欢拥有不同的iframe 并通过按钮显示它们。

$(document).ready(function() {
$(".modal_button_example_com_self").click(function() {
$('.modal_button_self').hide();
$('#example_com').attr("style", "");
});
$(".modal_button_example_net_self").click(function() {
$('.modal_button_self').hide();
$('#example_net').attr("style", "");
});
$(".close_self").click(function() {
$('.modal_button_self').attr("style", "");
$('#example_com').hide();
$('#example_net').hide();
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close close_self" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="help_modal">
<button class="modal_button_self modal_button_example_com_self btn btn-block btn-lg btn-primary">Open Example.com</button>
<button class="modal_button_self modal_button_example_net_self btn btn-block btn-lg btn-secondary">Open Example.net</button>
<iframe id="example_com" style="display: none;" src="https://example.com/" width="100%" height="50%" seamless></iframe>
<iframe id="example_net" style="display: none;" src="https://example.net/" width="100%" height="50%" seamless></iframe>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger close_self" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Answer 2

我设法通过一些javascript和html 'object'标签来实现你想要的：

我用 toReplace 变量的内容替换您的模态主体的内容，其中包含一个 html 'object' 元素，用于嵌入外部链接。

let el = document.getElementById("test");
let elToReplace = document.getElementById("help_modal");
let toReplace = "<object type="text/html" data="https://gnu.org/" width="100%" height="600px" style="overflow:auto;border:5px ridge blue"> </object>";
function replaceInner() {
elToReplace.innerHTML = toReplace;
}
el.addEventListener("click", () => { replaceInner(); }, false);

在此处查看工作代码笔：https://codepen.io/marc-simplon/pen/WBVmYW