CODEWITHSUNDEEP
jqueryframeset
fjung
fjung

Reputation: 161

JQuery Frameset

Hello i have a product with nested frames.

In the start.htm I define the frameset. which too parts. In the second part I define a new frameset in the b-home.htm.

When I use in the context of b-home.htm a link from the navigation (sichten-auswahl.htm) then a new Site with a new frameset is load.

Now I want to use the tablesorter of JQuery, so i must include JQuery too in every Frameset. But I want to include JQuery once in the first frameset my start.htm.

But when i do this, then JQuery isn't existing in the parent framesets.

Is there a solution? Thanks you a lot.

start.htm

//This is the start.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<title>Test</title>
</head>
<frameset rows="69,*" frameborder="0" framespacing="0" border="0" >
  <frame src="startseiten/top.htm" name="oben" scrolling="no" noresize>
  <frame src="startseiten/bottom-seiten/b-home.htm" name="unten" scrolling="auto" noresize>
  <noframes>
  <body>
  Ihr Browser unterstützt keine Frames. Daher können die Seiten nicht angezeigt werden.
  </body>
  </noframes>
</frameset>
</html>

b-home.htm

//This is the b-home.htm this is another Frameset here i have to include JQuery too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<script type="text/javascript" src="../sys/tools/editor/jquery.min.js"></script>
<SCRIPT type="text/javascript" src="../sys/tools/editor/jquery.tablesorter.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../sys/tools/editor/jquery.tablesorter.widgets.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../sys/tools/js/tablesortPlugin.js"></SCRIPT>
</head> 
<title>unten</title>
</head>
<frameset rows="24,*" border="0" framespacing="0" frameborder="0" >
    <frameset cols="300,*" border="0" framespacing="0" frameborder="0" >
        <frame src="../sichtenanzeige/t-home.htm"  name="sicht-anzeige" scrolling="NO" noresize>    
        <frame src="../menueleiste.htm" name="menueleiste" scrolling="NO" noresize>
    </frameset>
    <frameset cols="300,*" framespacing="5">
        <frame src="../sichten-auswahl.htm" name="menu" scrolling="NO")>    
        <frame src="../main.htm" name="mainmk" scrolling="auto">
    </frameset>
</frameset>
</html>

sichten-auswahl.htm

//This is the sichten-auswahl.htm here is the navigation for the first page. With this links i load a new frameset in the frame with the name "unten" Sichtenauswahl 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../redak_support/sys/layout/m-screen.css">
<title>Sichtenauswahl</title>
</head>
<body id="sichtenauswahl">
<p><a href = "bottom-seiten/b-customer.htm">Kunde</a></p><hr>
<p><a href = "bottom-seiten/b-main.htm">Hauptsicht</a></p><hr>
</body>
</html>

b-customer.htm

//b-customer.htm this is another Frameset here i have to include JQuery too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<script type="text/javascript" src="../sys/tools/editor/jquery.min.js"></script>
<SCRIPT type="text/javascript" src="../sys/tools/editor/jquery.tablesorter.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../sys/tools/editor/jquery.tablesorter.widgets.js"></SCRIPT>
<SCRIPT type="text/javascript" src="../sys/tools/js/tablesortPlugin.js"></SCRIPT>
</head> 
<frameset rows="24,*" border="0" framespacing="0" frameborder="0" >
    <frameset cols="300,*" border="0" framespacing="0" frameborder="0" >
        <frame src="../sichtenanzeige/t-kunde.htm"  name="sicht-anzeige" scrolling="NO" noresize>       
        <frame src="../menueleiste.htm" name="menueleiste" scrolling="NO" noresize>
    </frameset>
    <frameset cols="300,*" framespacing="5">
        <frame src="../js-kunde.htm" name="menu" scrolling="auto">      
        <frame src="../../umsetzung/sicht-kunde.htm" name="mainmk" scrolling="auto">
    </frameset>
</frameset>
</html>

tablesortPlugin.js

//tablesortPlugin.js this is the javascript which set for all tables the tablesorterPlugin

$(document).ready(function () {
    var frame = $('frame');
    frame.load(function () {
        var doc =  $(frame[3].contentWindow.document);
        $('table',doc).tablesorter();
    }); 
});

Upvotes: 1

Views: 568

Answers (1)

Starscream1984
Starscream1984

Reputation: 3062

If you absolutely HAVE to use this nested frameset solution - in other words you are not allowed to change it at all, then I would suggest that linking to the same jquery source file in each frame is your best approach.

It will be cached by the browser on the first load and not introduce further http overhead.

There were some 3rd party plugins (like frameready.js) which claimed to provide what you want, but they have all fallen out of support/development so I can't recommended them.

However, I would definitely recommend refactoring the HTML to not use framesets and use a modern front-end paradigm.

Upvotes: 1

Related Questions