Disable links in an iFrame

Question

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>

So where is your overlay `
`? you only have one `
` in your code which the `` is inside it. there is no overlay `<div>`!</div> — EhsanT, Dec 13 '16 at 23:18
That is my issue. I tried to create one but cant get it to work. — Curt, Dec 14 '16 at 14:56
OK, Please do some research before posting new questions. There are tons of solutions on the net that you can find by simply search for something like [this](https://www.google.com/search?hl=en&source=hp&q=html+css+overlay+div). Also [This post](http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) may help you... — EhsanT, Dec 14 '16 at 15:00
@EhsanT, I have added the div for the overlay. The image for the overlay is a 1px x 1 px trasparent image that is stored locally. — Curt, Dec 14 '16 at 17:12

score 3 · Accepted Answer · edited May 23 '17 at 12:08

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>

Thanks. I got my code to work using an online html/css tester. I need to combine that into just html as my CMS driven website does not allow css to be entered into a page element (as far as i can tell). — Curt, Dec 14 '16 at 20:59
OK, then if this answer has helped you, please select it as accepter and give it an upvote. — EhsanT, Dec 14 '16 at 21:24
There in lies my issues. I have tried to combine the html and css to no avail. And as you can tell, my coding abilities are very limited. — Curt, Dec 14 '16 at 22:26
@Curt I have updated my answer and added a combined version as well — EhsanT, Dec 14 '16 at 22:42
Thanks @EhsanT. When I run your code snippet, it works in the result window. Just curious how it would work when the "dot.gif" doesn't really exist. — Curt, Dec 15 '16 at 14:09
:) you are welcome and nothing would happen if the `dot.gif` does not exist. as the matter of fact, right now in my code here, this images does not exists. so you can simple remove the `` tag from the `
` element. it still will work as you want. — EhsanT, Dec 15 '16 at 15:03

Disable links in an iFrame

1 Answers1