iframe 未加载 HTML 页面我想对其执行 onClick 操作，但 HTML 正在自行工作答案

【问题标题】：iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its owniframe 未加载 HTML 页面我想对其执行 onClick 操作，但 HTML 正在自行工作
【发布时间】：2022-02-09 19:37:59
【问题描述】：

我的问题是我不希望我的 HTML 页面在 iframe 中工作，而是希望它们只显示，当有人点击它们时会打开一个新页面。

现在 Top Row Middle Iframe 有一个音频，并且在点击时正在播放类似地，在底行第一个 iframe 有一个正在工作的下拉菜单，但我希望如果有人点击它应该打开相应页面的任何地方

pointer-events none 也禁用了 onclick 事件。

【问题讨论】：

检查网络标签，可能是 404 not found 或 403 denied？
请参阅How to Ask。如果您还有第二个问题，请为其创建一个新问题。

标签： javascript html jquery css iframe

【解决方案1】：

首先，您必须在 iframe 上添加某种容器来阻止与 iframe 的任何交互。此外，该容器必须绑定到鼠标单击事件，该事件会将您带到 iframe 中显示的页面。

这是一个工作示例：

// Here is an event listner to bind a click event to the container
// that covers the iframe.
// All it does is take you to the page that the iframe is displaying
document.getElementById("cover-iframe").addEventListener('click', () => {
  document.location.href = 'test.html'
})

/* Set the size of this container (width, height)
to change the size of the iframe */
.container {
  position: relative;
  width: 50rem;
}

.iframe {
  width: 100%;
}

/* This is to make the container cover the iframe */
#cover-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!-- This container is to hold the iframe and the container that will cover the iframe  -->
  <div class="container">
    <!-- "test.html" can be changed to the page you want to display -->
    <iframe src="test.html" frameborder="1" class="iframe"></iframe>
    <span id="cover-iframe"></span>
  </div>
</body>

</html>

我在上面的代码中添加了 cmets 以使其不言自明。

【讨论】：

@TabishTanseef 不客气。