Cargar 2 (o más) marcos con un clic - Método Javascript

Aquí hay un ejemplo.

Lo primero que necesitamos son unos cuantos documentos con los que trabajar. Coge los siguientes y grábalos en tu carpeta de trabajo.

zjoe_bill.html
zjoe_ed.html
zjoe_frank.html
zjoe_tom.html
      zjackie_amy.html
zjackie_joan.html
zjackie_lisa.html
zjackie_toni.html
zjohn_al.html
zjohn_dean.html
zjohn_george.html
zjohn_ralph.html
      zjenny_denise.html
zjenny_marci.html
zjenny_pam.html
zjenny_shannon.html

Aclaro que todos empiezan por z para que se agrupen en el directorio y sea más fácil reunirlos y grabarlos.

En primer lugar construiremos el ejemplo más pequeño. Necesitaremos una página maestra que especifique dónde va cada cosa. Graba lo siguiente como master.html...

<HTML>
<HEAD>
<TITLE>Amigos de Joe y Jackie</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
  <FRAME SRC="dir.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="zjoe_bill.html" NAME="right_top">
    <FRAME SRC="zjoe_ed.html" NAME="right_bottom">
  </FRAMESET>
</FRAMESET>

</HTML>

Esto no es más que un simple marco HTML. Percátate de los nombres de los archivos (Aún no hemos hecho dir.html).

Graba lo siguiente como dir.html....

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

</BODY>
</HTML>

Añadiendo el script a HEAD...

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

</BODY>
</HTML>

No necesitas preocuparte de lo que significa por ahora.

Añade el texto de los enlaces y las sentencias de cierre. Pero no rellenes la parte HREF todavía.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="">Amigos de Joe</A>
<P><A HREF="">Amigas de Jackie</A>
</BODY>
</HTML>

Ahora añadamos la parte HREF.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed.html')">Amigos de Joe</A>
<P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan.html')">Amigas de Jackie</A>
</BODY>
</HTML>

Ahora carga en el navegador master.html y tu ejemplo será completamente funcional.

Perfecto. Ahora, ¿qué hemos hecho?. Y lo más importante ¿cómo funciona?

En pocas palabras, tenemos una función - multiLoad2(). Le pasamos argumentos a la función - zjoe_bill.html y zjoe_ed.html. La función procesa estos argumentos.

function multiLoad2(doc1,doc2) {
Aquí le pasamos dos argumentos a la función. Tan pronto como la función recibe los argumentos, éstos se convierten en las variables doc1 y doc2 que pueden ser manipuladas.

parent.right_top.location.href=doc1;
Coloca lo que sea que haya en la variable doc1 en el marco superior derecho.

parent.right_bottom.location.href=doc2;
Y aquí se coloca lo que sea que haya en la variable doc2 en el marco inferior derecho.

Puedes expandir facílmente todo esto para cambiar más marcos. Añade lo que sigue a master.html y guárdalo como master2.html...

<HTML>
<HEAD>
<TITLE>Amigos de Joe y Jackie</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
  <FRAME SRC="dir2.html">
  <FRAMESET ROWS="25%,25%,25%,25%">
    <FRAME SRC="zjoe_bill.html" NAME="right1">
    <FRAME SRC="zjoe_ed.html" NAME="right2">
    <FRAME SRC="zjoe_frank.html" NAME="right3">
    <FRAME SRC="zjoe_tom.html" NAME="right4">
  </FRAMESET>
</FRAMESET>

</HTML>

(No olvides cambiar de dir.html a dir2.html. Vamos a usar una página de directorio diferente.)

Ahora añade esto a tu dir.html original y guárdalo como dir2.html...

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad4(doc1,doc2,doc3,doc4) {
  parent.right1.location.href=doc1;
  parent.right2.location.href=doc2;
  parent.right3.location.href=doc3;
  parent.right4.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad4('zjoe_bill.html',     'zjoe_ed.html',      'zjoe_frank.html',   'zjoe_tom.html'      )">Joe's friends</A>
<P><A HREF="javascript:multiLoad4('zjackie_amy.html',   'zjackie_joan.html', 'zjackie_lisa.html', 'zjackie_toni.html'  )">Jackie's friends</A>
<P><A HREF="javascript:multiLoad4('zjohn_al.html',      'zjohn_dean.html',   'zjohn_george.html', 'zjohn_ralph.html'   )">John's friends</A>
<P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci.html', 'zjenny_pam.html',   'zjenny_shannon.html')">Jenny's friends</A>
</BODY>
</HTML>

Carga master2.html para probar tu creación.

Practica y experimenta un poco con lo anterior y verás que puedes crear diseños muy potentes. También he añadido la carga aleatoria de marcos para que te des cuenta del potencial que tiene la manipulación de marcos basada en JavaScript.

Y esto es todo en cuanto al segundo método de cargar varios marcos con un clic. De todas formas, como ya dije antes, usa el método HTML siempre que puedas.