1

I have a page on which I have an iframe (containing a page from another domain) and it is set to show a certain part of the page. However, I want to make it so that after the first click the iFrame moves to show a lower part of the source page. Is this possible?

With regards,

SJA

SweatyJoeAllen
  • 13
  • 2

1 Answers1

0

Your overall solution is formed of following steps:

  1. You should detect the click on iframe

  2. then reload the second target which you need to be scrolled to in the iframe's inner page.(e.g. : [iframePageURL]/index.html#secondTarget)

Now lets dive into detailed explanation:

item 1 in detail: in order to detect click on an iframe you need to put a transparent overlaying layer on it : Consult the answer here which has offered the solution in detail. You just need a flag to unset it after the first click.

Item 2 in detail: Now that you've got user's click on the iframe, change the iframe's src to the desired target, using sth like this:

document.getElementById('calendar').src = loc;
behkod
  • 2,647
  • 2
  • 18
  • 33
  • Thanks for the info! I am looking into the first item and was wondering for the second item if I can use this then to not change the iframe source, but the iframe style. For example if I can capture the click,I would like to change the iframe width from 200 to 300 or whatever. I am guessing this is possible, but just to be sure. – SweatyJoeAllen Jun 21 '17 at 15:30
  • Sure you can, using sth like this: `document.getElementById("myFrame").width = "400";` – behkod Jun 21 '17 at 21:08
  • Sorry for the late reply, have been quite sick unfortunately. Thanks again for the help, it worked applying it! – SweatyJoeAllen Jun 23 '17 at 22:17
  • You're welcome @SweatyJoeAllen, God bless. glad to hear it worked. – behkod Jun 24 '17 at 01:09