How to Scroll Top when clicking on a Page within an iframe

[Initiostar]

By way of an example, here is a 'version' of the Audio Player being used as a plugin: https://initiostar.co.uk/demo/AudioPageHolder/ - this enables it to be seamlessly used across multiple variants.

Within the plugin itself one can scroll down a long list of audio tracks and for each one selected, the player scrolls up to an 'information panel' which contains the audio controls for the audio track and anything else the designer wants to add to that panel. All good so far!

The challenge though is this: if a user scrolls down the main page and clicks on a audio track, in some cases where there is a long list, the info panel is not always in view. The required action is for a double-scroll where the info panel comes in to view AND the main page scrolls to the top too.

The iframe code includes a 'window.parent.scrollTo', but this is not good enough to do the trick.

<iframe src="audioplugin.htm" title="Audio_Player_Plugin" name="audioplugin" width="100%" height="100%" style="border-style:none;" onload="window.parent.scrollTo({ top: 0, left: 0, behavior: 'smooth' });"></iframe>

This version of the Audio Plugin uses a page-within-a-page and not popups to keep it simple; each page is called by its page name and loads with the target "audioholder". Had thought about changing the standard Xara page link to a javascript link and adding a scroll-top, but not convinced this would work either.

@Acorn > normally I can fathom this out, but not this time!

Gary

[Acorn]

Gary, without your source, I am guessing your track links are set to open within the IFRAME after setting the target to audioholder

To get the jump, you need to perform some JavaScript magic like:
javascript: window.parent.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); self.frames['audioholder'].location.href = 'soundtrack1.htm';

You need then to remove the target.

Acorn

[Initiostar]

Thanks Acorn, I did give that a try, but without success. Here is the plugin: Audio Embedded Page Player Plugin.xar

May well be operator error on my behalf. Help much appreciated.

Gary

[Acorn]

Thanks Acorn, I did give that a try, but without success. Here is the plugin: Audio Embedded Page Player Plugin.xar
May well be operator error on my behalf. Help much appreciated.
Gary

Gary, your beastie needs to be part of a website.

I am not sure how you add it into one.
A straightforward IFRAME?

<iframe src="audioholder.htm" title="Audio_Player" id="audioholder" name="audioholder" width="100%" height="100%" scrolling="no" style="border-style:none;" onload="window.scrollTo({top:0, left:0, behavior:'smooth'});"></iframe>

Acorn

[Acorn]

I'm stuck as the moment.

I also tried document.getElementById('audioholder').src='soundt rack1.htm'. On its own, it works well from the Console but this is effectively from the main website.

The simplest solution is still the best.

Move all of the Playlist from the IFRAME to the main website.
Any chosen track changes to that and the page scrolls to the top as an IFRAME change of source acts as an onload event, which you've already covered.

Acorn

[Initiostar]

Thanks Acorn,

Where I started was in response to another thread where the OP asked if his WP Audio plugin could be replicated in Xara. That bit was relatively easy here: https://initiostar.co.uk/demo/AudioPage/

The tricky part then became how can I make this work across more than one variant and one immediately falls foul of the 'iframe id trap'; I did try using you variants code but in this case without success. The thought then followed the same design as for previous audio and video plugins, where the plugin is a website-within-a website.

The outcome with both a desktop and variant using the embedded audio plugin is here: https://initiostar.co.uk/demo/AudioPageHolder/ - it is a fast loading in the Lighthouse test and the trick is to keep the iframe height relatively short.

The original OP question wanted an info panel and to start the audio from that panel; otherwise the design could be a lot simpler.

Another example I toyed with is to use classes for the info panels combining a couple of your ideas from the past: https://initiostar.co.uk/demo/AudioPhoto/

Not defeated yet on the original simultaneous iframe and page scroll, but I think it has to be some form of onclick rather than onload.

I've parked the challenge for now!

Gary