20

I have an iframe showing on my page in a panel of a fixed height but the page rendered in the iframe is much larger. I don't want the user to be able to click on anything in the iframe. I know that the general solution to this would be to have an invisible div on top of the iframe to disable all interaction. However, this also disables the ability to scroll. Is it possible to catch and ignore any clicks on the iframe page but still allow the scroll to be propagated?

user1497256
  • 241
  • 1
  • 3
  • 4
  • 1
    Guessing the iframe is not in your domain. – epascarello Apr 26 '17 at 03:55
  • 1
    No, not in my domain – user1497256 Apr 26 '17 at 04:10
  • 1
    Than there really is nothing you can do. You can guesstimate the height of the page and set your iframe to that full size and than scroll a div on your page. – epascarello Apr 26 '17 at 04:11
  • Incorrect, there is tonnes you can do. Simpy inject your own javascript into the domain and assuming you have jQuery enabled you can just use something like $('button').click(function(){}) and similar functions to disable the events fired by all the interactive elements of a website. – Simon Hyll Apr 26 '17 at 04:22
  • 3
    I don't think you can inject javascript cross domain like that. – user1497256 Apr 26 '17 at 04:25
  • I was thinking something more along the lines of catching scroll event on overlayed panel and then programmatically send that scroll event to the iframe element. That way it can be done without any inner knowledge or access to the iframe page – user1497256 Apr 26 '17 at 04:26
  • You can add script tags to the target iframe, at least according to this: http://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run-the. And if that is incorrect I can probably create an example of manipulating an iframe for you but it would take some time and I'm really tired right now... – Simon Hyll Apr 26 '17 at 04:34
  • https://api.jquery.com/scroll If you want to grab scroll you can do it with jquery, then set the scroll value of the iframe to match the scrolling amount. https://api.jquery.com/click/ Simply do $('iframe').children().click(function () {}) and it should make all clicks on anything in the iframe be useless. – Simon Hyll Apr 26 '17 at 04:45

1 Answers1

20

If you don't want the contents of the iframe to be interactable by the user, you can disable pointer-events on it. But as you want it to be scrollable, just put a full sized iframe in a smaller div with overflow: scroll.

div {
  width: 50vw;
  height: 50vh;
  overflow: scroll;
}

iframe {
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
<div>
  <iframe src="http://example.com"></iframe>
</div>
  • 15
    The problem here is that the iframe can be arbitrary height so there's no value for what a "full sized" iframe would be. I could set the iframe to be overly large but then that just gives a lot of empty space at the bottom which looks bad. – user1497256 Apr 26 '17 at 16:28