2011
10.31

Inject current document to a frameset with JavaScript

Category: Article / Tag: ,  / Add Comment

Recently I’m working on a news portal, which offers mp3 listening functions, and the client does not want a popout player, but a kind of a constant player on the top of the page.

One way is to create the whole page with a JavaScript framework (for example JMVC), the easy way is to create a frameset on the fly, and inject the current document inside one of the frames.

The second option definately needs less work, so I did that, and I’ll show you exactly how.

Let’s pretend we have an anchor somewhere in the body like this:

1
<a href="javascript:void(0);" onClick="showPlayer();" >Let's take a listen</a>

On the other hand I load a .js file in the header which contains this showPlayer function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function showPlayer()
{
  var currentContent = document.body.innerHTML;
 
  document.write('<frameset rows=20,100%>');
  document.write('  <frame src="player.html" name="player">');
  document.write('  <frame src="about:blank" name="main">');
  document.write('</frameset>');  

  parent.frames[1].document.open();
  parent.frames[1].document.write( currentContent );
  parent.frames[1].document.close();
 
  return false;
}

First I load the whole content to a variable.
After it I replace current document contents with a frameset (HTML reference guide says frameset and body can’t exists in the same time in a html document).
Load the player.html, and inject the original contents inside the second frame.

That’s it.

No Comment.

Add Your Comment

Your Comment