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

Question

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

现在顶行中间的 iframe 有一个音频，点击播放同样在底行，第一个 iframe 有一个正在工作的下拉菜单，但我想如果有人点击任何地方它应该打开相应的页面

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

Answer 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>

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

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

iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its own

html

javascript

css

iframe

jquery

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

iframe not loading HTML Page I want to perform onClick operation on it but instead HTML is working on its own

html

javascript

css

iframe

jquery

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