Question

我在尝试禁用iframe中的链接时遇到了麻烦。我正在尝试创建一个覆盖在iframe顶部的透明div，以便链接不起作用。有谁愿意帮忙吗？

＆＃13;

<div id="framearea" style="border: 2px solid #000000; margin: 0px auto; width: 500px;">
<div id="framecover" style="position:absolute; z-index: 2; height: 100%; width: 100%"><img src="dot.gif" width="100%" height="100%" border="0">
<iframe id="scoreboard" scrolling="no" src="http://www.espn.com" style="border: 2px solid; margin-left: 20px; height: 400px; margin-top: -170px; width: 312px; z-index: 1"></iframe>
</div>

＆＃13;

Answer 1

正如我之前所指出的，使用this link中接受的答案将做你想做的事。

但总而言之，我会在答案中使用相同的代码并稍微改变一下以满足您的需求：

#container {
  width: 700px;
  height: 700px;
  position: relative;
}

#framearea,
#framecover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#framearea{
  z-index: 1;
}

#framecover {
  z-index: 10;
}

#scoreboard{
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="framearea">
    <iframe id="scoreboard" scrolling="no" src="https://www.godaddy.com"></iframe>
  </div>
  <div id="framecover">
    <img src="dot.gif" width="100%" height="100%" border="0">
  </div>
</div>

所以你会有一个container，然后你有一个framearea <iframe>将在其中加载你的数据，然后你会有一个framecover }将使用z-index: 10; css进行叠加，将其置于具有framearea css的z-index: 1;之上

<强>更新

如果您不能使用单独的html和css代码，并且应在css内使用html个样式，那么上面的代码就是这样：

<div id="container" style=" width: 700px; height: 700px; position: relative;">
  <div id="framearea" style="  width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;">
    <iframe id="scoreboard" scrolling="no" src="https://www.godaddy.com" style="width: 100%; height: 100%;"></iframe>
  </div>
  <div id="framecover" style="  width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;">
    <img src="dot.gif" width="100%" height="100%" border="0">
  </div>
</div>

禁用iFrame中的链接

1 个答案: