0

I have an iframe and I want it to be draggable, but I can't access listen to it via a css selector for jquery: $("iframe").on("click") doesn't work.

I saw some people, wrapping their iframe with a div, so the iframe takes the all height and width of the div. I can select the div via $(".draggable"), but the event listener on click on the div doesn't work...

Here are some examples : example 1 The iframe is in blue and the wrapping div in white, I add an event listener on the div like that : $(".draggable").on("click", () => console.log("hello")) The event is fired when I click on the white side (not the iframe side).

example 2

In that second example, the iframe width and height are the same as the div and when I click on it nothing happens.

Do you have any ideas to fire that event when clicking on the div ?

patacoing
  • 87
  • 1
  • 10
  • One of the points of using an iframe is that it's a separate DOM. You need to attach the events to the DOM of the document in the iframe, not to the DOM of the container. This is why CSS selectors don't work. – Tibrogargan Oct 21 '22 at 20:23
  • @Tibrogargan no because contentDocument is null and when i tryed to use contentWindow.document, chrome threw me cross-origin errors – patacoing Oct 21 '22 at 20:44
  • Actually, it does. There's comments in answers to that question that literally point out the document may not be accessible and that CORS is a factor. What you're trying to do might be a legitimate use case, but it crosses the line for the browser rules that enforce copyright and fair use. If you want to include behavior like the frame you're trying to embed, write it yourself. – Tibrogargan Oct 21 '22 at 20:56
  • (But what you really want to do is have a transparent layer inside your draggable div over the over the top of the iframe and explicitly don't use `preventDefault` for non drag events) – Tibrogargan Oct 21 '22 at 21:01

0 Answers0