javascript - 在 iframe 内的弹出窗口中打开链接

Question

我有一个包含许多链接的网页，我想在 iframe 内的弹出窗口中显示这些链接中的任何一个，这样我就不需要每次都转到另一个页面，而只需显示并关闭窗口即可。

所有链接均针对同一页面 ( another-page.php )，仅 ( id ) 发生变化。

例如:

<a href="another-page.php?id=1">Link1</a>
<a href="another-page.php?id=2">Link2</a>
<a href="another-page.php?id=3">Link3</a>
.
.
.

因此，当我单击 Link1 时，它应该打开一个弹出 html 窗口并在 iframe 内显示 Link1:

another-page.php?id=1

等等。

我正在寻找使用纯 JavaScript 的解决方案。

谢谢。

Answer 1

感谢您的 12 次浏览...

最好的方法是使用基本的 JavaScript 代码来获取链接。 * 我将href更改为值:

<script>
    function doalert(obj) {
        var el = document.getElementById('here').src = (obj.getAttribute("value"));
     ;
        return false;
    }
</script>

对于我使用的 Iframe 和弹出窗口:

<script>
var modal = document.getElementById('modinfo');
var span = document.getElementsByClassName("close")[0]; 
function test() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

加上一些妆容:

<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>

链接将是:

<a onclick="doalert(this);test()" value="another-page?id=1">Link1</a>

最后一件事是 html:

<!-- Modal -->
<div id="modinfo" class="modal" style="display: none;">
  <!-- Modal content -->
  <div style="margin: 0 auto; width: 80%;background: white;border: none; border-radius: 0">
    <span class="remove" style="cursor:pointer;color: #3D5872; font-size: 26px">x</span>
    <iframe id="here" src="" style="width: 100%; height: 310px;border: none;"></iframe>
  </div>
<!-- Modal content -->
</div>
<!-- Modal -->

这就是制作它所需的全部内容。