如何在 div 中打开 url 链接并同时停留在当前 url 上？

Question

我正在尝试使用我拥有的图标，当点击展开时就像我打开浏览器一样，在展开的 div“浏览器”中拉出我附加的 URL。如何在不离开 index.html 或在新选项卡上打开它的情况下，在我的原始 index.html 中提取一个可交互的新 url？

我知道如何使 div 可点击以展开屏幕，但不知道如何在不打开新选项卡或离开我的 index.html 的情况下使该 div 变成我想要的 url。

Answer 1

您可以使用 Iframes（而不是简单的 div）：

<iframe src="The url you want to show" title="its description"></iframe>

您还可以使用 css 更改其外观：

iframe {
    width: 100px;
    height: 100px;
    border: none;
}

Answer 2

添加到 Arshaan 的答案中，如果目标站点拒绝使用 iframed（请参阅clickjacking），这可能不起作用。

如果您使用

<div>

而不是

<iframe>

，您可能会发现您无法通过 AJAX 加载其他站点（如果它未启用 cors）。即使您可以加载 HTML 并将其插入

<div>

，如果嵌入的 HTML 然后加载 Javascript，则可能会以无法预料的方式与 HTML 页面的其余部分进行交互。

总而言之：这不太可能在一般情况下起作用。