javascript - having a div appear on different pages -

i have unusual situation need have same "permanent" div appear on multiple pages, not allow browser reload between page changes. in other words, need load in new pages , "slide them underneath" permanent div. permanent div needs able moved around. below crude illustration of trying accomplish:

i can accomplish of need using jq load:

$('div#outercontainer').load('/page-one.html', function()  {         console.log ('first load performed') ; }); 

is there way using jquery create unix equivalent of "symbolic link" - not link, rather way unix lets "ln -s" file appears in 2 or more places @ once?

i considered making permanent div invisible , cloning it, div contains external iframe , cannot have 2 identical iframes on page @ same time. considered saving permanent div variable, means have destroy permanent div, not work either.

or have better way approach this?

thank much.

edit

here working example of after. have parent.html first calls child-1.html upon initial page-load. child-1.html can request load of child-2.html, , vise-versa, in simple example.

div#mastercontainer div needs appear on each page. discovered can make 0 pixels 0 pixels invisible. (better ideas welcome , appreciated)

this not ideal solution since using window-resize , absolute position values move div#mastercontainer around. if there better solution anchor div#mastercontainer div#childcontainer optimum answer.

parent.html:

<script type='text/javascript'>     $( document ).ready(function() {             nextpage("child-1.html");             return false;     });     nextpage.initialload    = true;     function nextpage(nextpagehtml) {             if  ( nextpage.initialload )    {                     nextpage.initialload = false    ;                     $('div#mastercontainer').css(                             {       'width'         :       '300px'                             ,       'height '       :       '200px'                             ,       'position'      :       'absolute'                             }                     );             }             $('div#masterpageholder')                .empty()                .load( nextpagehtml                     , function(responsetxt, statustxt, xhr) {                          aligndiv();                       }                     );             $(window).resize(function()     {                     aligndiv();             });     }     function aligndiv()     {             var p = $('div#childcontainer');             $('div#mastercontainer').css(                             {       'left'  :       p.position().left                             ,       'top'   :       p.position().top                             }                     );     } </script> <div id='masterpageholder'></div> <div id='mastercontainer'   style='position:  relative  ;          height:    0px       ;           width:     0px       ;          overflow:  none      ;          border:    2px dotted red;'>             mastercontainer              surrounded 2px dotted red border </div> 

child-1.html:

<div style='height: 40%;'> <a href='#' onclick='javascript:nextpage("child-2.html");'>child-2.html</a> </div> <div style='margin-left: 50%'>         <div id='childcontainer' style='width: 300px; height: 250px;' /> </div> child-1.html webpage 

child-2.html:

<div style='height: 20%;'> <a href='#' onclick='javascript:nextpage("child-1.html");'>child-1.html</a> </div> <div style='margin-left: 20%;'>         <div id='childcontainer' style='width: 300px; height: 250px;' /> </div> child-2.html webpage 

any other suggestions appreciated.

"i considered making permanent div invisible , cloning it, div contains external iframe , cannot have 2 identical iframes on page @ same time"

var newdiv = $('.permanent-div').clone().find('iframe').remove(); 

perhaps fix problem, if not you'll need make result you're hoping clearer, perhaps adding code question.