0

I have an iframe website in my website. There is a code in iframe website like this below.

// code in iframe website
document.addEventListener('keydown', (event)=> {
      ....
})

Iframe loaded without any error. if I do not click anywhere in iframe website, it does not work that js code. But when I click anywhere into iframe website, that code works. How can I click iframe website with js to run that code. or is there any solution ?

SefaUn
  • 824
  • 1
  • 7
  • 23
  • It sounds like it's working as it should. Are you saying you want that `keydown` event to work inside AND outside of the `iframe`? If so, just move that code to be in the main page's code. – Scott Marcus Aug 22 '23 at 13:13
  • just do like this. Create a html website. split screen 50% 50%. first screen main website. second screen iframe website. but second website has to be contain `document.addEventListener('keydown', (event)=> {console.log('test')})`. when your html loaded in browser first time, without do anything just press any key from your keyboard. `document.addEventListener('keydown'` will not run. when you click iframe website and press any key, it will run. I want, when iframe loaded, it works `keydown` event directly without click iframe website. @ScottMarcus – SefaUn Aug 22 '23 at 13:38
  • Then just have the event code in the main HTML file and not the `iframe` file. Or, instead of using an `iframe` in the first place, use AJAX to bring the contents of the second file into the first one as a single document. – Scott Marcus Aug 22 '23 at 13:57
  • I have to solve this problem from iframe website codes. @ScottMarcus – SefaUn Aug 22 '23 at 14:02
  • Have you tried (within the `iframe` document), having the code be `document.parent.querySelector("body").addEventListener('keydown', (event)=> {console.log('test')})`? – Scott Marcus Aug 22 '23 at 16:35
  • I tried but there is an error like this. `document.parent is undefined` @ScottMarcus – SefaUn Aug 22 '23 at 21:53
  • In that case, I don't believe you'll be able to do this from the `iframe`. – Scott Marcus Aug 22 '23 at 21:54
  • 1
    [this solution](https://stackoverflow.com/a/76960407/14761370) is not iframe solution. But it solve my problem from parent. @ScootMarcus – SefaUn Aug 23 '23 at 10:26

1 Answers1

1
<iframe id="test" name="iframe-name" src="https://example.com" height="800" width="600" title="Iframe Example"></iframe>

<script>
    var iframe = document.getElementById("test")
    const onloadReferance = () => {
        document.getElementsByName("iframe-name")[0].contentWindow.focus()
    }
    iframe.addEventListener('load', onloadReferance)
</script>

also you can check this question

Erdem Ün
  • 204
  • 1
  • 7
  • [`document.getElementsByName("iframe-name")[0]` should be `document.querySelector("iframe`)`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) – Scott Marcus Aug 23 '23 at 15:32
  • no problem. Both of that works @ScottMarcus – SefaUn Aug 24 '23 at 08:04
  • @SefaUn Yes, it is a problem. Did you read the post that I linked to? Just because some code "works" does not make it correct or even good code. `.getElementsByName()` returns a "live" node list that causes a performance hit that can be avoided. Also, it makes no sense to create a node list of all matching elements and then just throw that list away, only to get the first one in the list. – Scott Marcus Aug 24 '23 at 13:17