We're building a Drupal site with an audio player which should keep playing while you browse the page (something like soundcloud).
Currently we're loading clicked <a>
's sites with AJAX and inject the HTML into the page and use history.js to manipulate the location.
There is a major downside though:
Since a newly loaded page may have different CSS and JS on it, we have to compare the current script, style and link elements to the AJAX response text (ugly regex) and only add the new, yet non-existing elements. By doing so, loading another page won't delete/remove/undo once executed scripts. This may become a performance issue (while regex against markup is anyways).
Using an iframe may solve this and other problems:
When you first click a link on the site, the page content is replaced by an iframe which just loads the page. The audio player is in the original DOM, i.e. outside the iframe. Clicking links inside the iframe can be caught and used within the history API as well.
So, although I've never thought I'd think so: I think using an iframe may be the better option here, isn't it?
PS: My main problem is that I can't control that different pages on the website have different scripts, the styles really are no problem. If there was just one huge static JS and CSS website-wide, I didn't have a problem.
Update
The iframe solution works fine, except in iOS. Iframes are buggy as hell. Still, I think we're going with the iframe solution.
I would say... keep it simple, stupid. Go for the iframe solution, I know it kills a part of your soul, but it is the easiest solution to your problem and represents the lowest change of running into problems in the future.
KISS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With