Menu
Is there a good article or how can have an iframe or frame work asynchronously with every page? I have a bottom/fixed div wrapped in jquery to slide up on hover containing an mp3 player. I referenced the player with an iframe. I renderes fine, but how can it keep playing without a reload on page refresh or navigation to another page? I want it to be fixed at the bottom of every page and play continuously without refresh. I tried putting the iframe in each page, but that still didn't work. Any ideas? Thank you.
378
iframes should load asynchronously without any effort on your part.
If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in. A malicious user can change the source site URL.
An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.
Use the iFrame fallback embed The fastest way to load an embedded form is by using the iframe fallback method as outlined in the fallback documentation. If you go with this method, make sure you review the gotchas in the linked documentation to ensure this approach is right for you.
If it must stay in the browser ( not downloading an application or read stream in a music/video player ), the only way should be to don't really change page, and load content that must change with ajax or javascript ( or have it itself in a (i)frame ).
But it would be a lot easier to do a page with only the lector and put a link on your website to open it in another tab :
<a href="/music-player.htm" target="musicPlayer">Text or what you want</a>
Edit :
So with javascript it would be the same result than ajax, but that means not changing page so for the SEO if it's somewhat important it's not good.
What I meant by javascript was for example if you click on link "home" just adding dynamically a <script type="text/javascript" src="/homepage.js"></script> wich modify content of the page ( while keeping the mp3 player ).
Otherway, maybe with a cookie if it's possible with the player to know by javascript :
It would be possible when changing page to get at the good time ( but there will be the time to load the page and mp3 player without music ).
Or there could be mp3 player which can save a the time at wich we are, and begin at this time on another page ( but still while changing page no sound for several seconds ).
With these methods there would be too the issue of opening several pages.
Edit :
I tried the way with the content of the page in iframe, it works rather well but needs the membre to switch in the mp3 mode.
Here is mp3.html ( to put in root folder, if it's not possible it would need some changes ) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MP3 Player</title>
<style type="text/css">
html {
font-size: 100%;
}
body {
margin: 0;
padding: 0em;
}
#frame { width: 100%; height: 100%; border: none; }
#player { position: absolute; right: 20px; bottom: 20px; }
</style>
<script type="text/javascript">
if ("onhashchange" in window) {
var h='';
var command= false;
window.onhashchange = function(){
if(location.hash==h) return;
command= true;
window.frames['frame'].location.replace(location.hash.replace(/^#/,""));
h= window.location.hash;
}
}
</script>
</head>
<body>
<iframe id="frame" onLoad="if(this.src=='')return;if(command)command=!1;else window.location.replace(h='#'+window.frames['frame'].location.href.replace(new RegExp('^'+document.location.origin),''));document.title=window.frames['frame'].document.title;"></iframe>
<script type="text/javascript">
document.getElementById("frame").src=document.location.hash.replace(/^#/,"");
</script>
<div id="player">
<object type="application/x-shockwave-flash" data="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3"></object>
<a href="javascript:document.location.href=document.location.hash.replace(/^#/,'')">remove mp3 player</a>
</div>
</body>
</html>
And to put a link that open the current page in an iframe and with an mp3 player, it only needs a link :
<a href="javascript:parent.location.href='/mp3.html#'+document.location.href.replace(new RegExp('^'+document.location.origin),'')">add mp3 player</a>
An example using that here.
179
Either you have an independent Flash/Java/Unity etc player outside the browser window.
Or, You use frames, two frames, one where the main site pages appear, and one where the player resides.
Other way is making the entire navigation in your site (where you want the player to be continuous) using async calls (Ajax).
Google b.t.w uses iframes/frames
1
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
