CODEWITHSUNDEEP
htmliframe
Curt
Curt

Reputation: 23

Disable links in an iFrame

I am having troubles trying to disable links in an iframe. I am trying to create a transparent div that would overlay on top of the iframe so that links do not work. Anyone willing to help?

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

Upvotes: 2

Views: 6222

Answers (1)

EhsanT
EhsanT

Reputation: 2085

As I have pointed previously, Using the accepted answer in this link will do what you want to do.

But to sum things up, I will use same code in that answer and change it a little to meet your needs:

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

So you will have a container, then you have a framearea which your <iframe> will be in it and load you data inside it, then you will have a framecover which will be overlay using z-index: 10; css to bring it on top of framearea which has z-index: 1; css

Update

If you can not have separate html and css codes and should use css styles inside your html then the code above would be like this:

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

Upvotes: 4

Related Questions