0

I have an Apple podcast embed on my page wherein I need to add some code for analytics tagging based on clicks on play and pause buttons. I have achieved this for Spotify embed using their iFrame API however Apple podcasts don't seem to have one.

As a workaround, I am trying to find a way to access the play and pause buttons inside the iFrame and trigger a click event and add the code. Because of the cross-domain policy, the following code doesn't return anything -

this.iframeAppleWidget = this.$el.find('iframe');
console.log(this.iframeAppleWidget[0].contentWindow.document); // Empty

My HTML code looks like this -

<iframe class="apple-podcast-small" title="Test Podcast" style="margin: 0 auto; display: block;" src="https://embed.podcasts.apple.com/us/podcast/how-to-learn-web-development-skills/id1412209136?i=1000554938051&amp;itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto" width="80%" height="166" frameborder="no" scrolling="no"></iframe>

I'm trying to add a click event listener to a button element inside the #document (iFrame DOM) and add some code.

After doing a lot of research, I found Window.postMessage() as a suggested solution however I'm unsure of whether it can help as I'm not trying to send any message from one window to another.

Could you please point me in the right direction?

Harshada K
  • 1
  • 2
  • simple answer is - you can't - `postMessage` is the only solution that could work - but both pages (the main and the one in the iframe) need to be written in such a way that they use `postMessage` and a `message` event handler - obviously if it's one way communication, the "sender" uses `postMessage` and the "receiver" uses a `message` event handler to listen for the message – Bravo Apr 26 '22 at 02:00
  • @Bravo Thank you for your response. I'm new to `postMessage` but upon looking at the documentation, it seems like that method lets you send data from one window to another but all I'm looking for is to get access to the cross-origin iFrame inner elements (play & pause buttons) and add a click event listener. Is that possible with `postMessage`? – Harshada K Apr 26 '22 at 19:06
  • yes, it is possible to use `postMessage` inside an event handler – Bravo Apr 26 '22 at 22:13
  • @Bravo I'm not sure I follow. Could you please explain with a code example? – Harshada K Apr 26 '22 at 22:52
  • never mind - I assumed you can change the content you load in the iframe since you asked about `postMessage` - sorry to waste your time - the simple answer is, you can't do what you want unless you can change the code in the page sent by apple ... and clearly, you're not Tim Apple – Bravo Apr 27 '22 at 00:01
  • No problem. Either way thank you for responding and that was funny! :D – Harshada K Apr 28 '22 at 07:50

0 Answers0