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>

但是该链接正在同一标签中打开...

更新

我也尝试过this answer，但在this comment之后也对我不起作用。

Answer 1

我设法用一些javascript和html'object'标签实现您想要的：

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

try:
    if left_count and right_count: total_count = right_count + left_count
except NameError:
    print('NameError catched')
    total_count = 0

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

Answer 2

回答您的comment：

如果您在运行JSFiddle时检查控制台，则说，

拒绝显示 'Opening a link inside a div in the modal' 因为祖先违反了以下内容安全性政策指令：“框架祖先的'自我'”。

这是什么意思

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

感谢TimmyB's answer。

回答您的question：

Learner's answer也是一个不错的选择。（+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>

在模式中的div中打开一个链接

更新

2 个答案:

回答您的comment：

回答您的question：