Refereren naar de online stamboom vanuit een andere webstek

27 augustus 2020 Herschreven om gebruik te maken van “template”-bestanden die toegevoegd zijn aan ProGen.

Tja, dan heb je die mooie stamboom gepubliceerd en wil je in een ander verhaal, bijvoorbeeld in je blog, refereren naar een of meer personen in die stamboom en dat lukt maar niet. Je krijgt wel de persoonsgegevens te zien, maar niet de mooie vensterstructuur. Het probleem zit hem in het feit dat de makers van ProGen hebben gekozen voor het gebruik van html-frames. Op zich was dat een goede keuze, maar precies het bovenstaande probleem ontstaat daardoor.

Er is gelukkig een niet al te ingewikkelde manier om dit probleem te omzeilen, er dienen twee bestanden te worden aangepast. Het eerste is – van huis uit CSS-FR3L.PTM genaamd. Dit hoort bij een schermdefinitie met 3 frames met de index links, voor andere definities zijn vergelijkbare bestanden. Het staat in de map ../NL/ en verplaatsen we naar ../NL/WEBSITE en passen we als volgt aan:

<!-- Created by : #USERNAME$! -->
<!-- Date/Time  : #DATE$! #TIME$! -->
<!-- Program    : PRO-GEN #VERSION$! -->
<!-- File       : #FILE$! -->
<!-- ***** All rights reserved (C) #YEAR(DATE$)! #USERNAME$! ***** -->

<html>
  <head>
    <title>#TITLE!</title>
    <!-- GK: hieronder is een meta-blok toegevoegd om de karaktercodering vast te stellen -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- GK: hieronder wordt de javascript bibliotheek opgeroepen en de functie LoadFrames gedefinieerd -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        function LoadFrames(){
        var genurl = location.search.substring(1);
        <!-- GK: hieronder wordt de "landingspagina" ingesteld. -->
        if (genurl == "") genurl = "#FILEDATA!";
        document.getElementById('output').src = genurl;
        }
    </script>
  </head>
  <frameset rows="125,*" frameborder="2" framespacing="2" border="2">
    <frame src="#FILE3!" name="keyindex" marginheight="0" marginwidth="0">
     <!-- GK: hieronder is de onload-tag toegevoegd -->
     <frameset cols="20%,*" frameborder="2" framespacing="2" border="2" onload="LoadFrames();">
      <frame src="#FILE4!" name="index" marginheight="4" marginwidth="4">
      <!-- GK: hieronder is een id toegevoegd en wordt de bestemming src leeggemaakt. -->
      <frame src="" id="output" name="output" marginheight="4" marginwidth="4">
    </frameset>
  </frameset>
  <noframes>
    <body>
      Deze pagina maakt gebruik van frames.<br />
      Hiervoor is Netscape of Internet Explorer versie 2.0 of hoger nodig.<br />
      <p />
      U kunt wel enkel de <a href="#FILEDATA!">gegevens weergeven</a>, maar de index blijft dan achterwege.<br />
    </body>
  </noframes>
</html>

Helaas is dat niet voldoende. De oorzaak ligt in het feit dat in frame-definities geen bookmarks worden doorgegeven. Daarom moet ook het bestand CSS-UTF.PTM van de ../NL/-map worden gecopieerd naar de ../NL/WEBSITE/-map en als volgt te worden aangepast:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=#ENCODING$!">
  <title>#TITLE!</title>
  <meta name="Generator"   content="PRO-GEN #VERSION$!">
  <meta name="Description" content="#TITLE!">
  <meta name="Keywords"    content="#Achternaam!, Genealogie, Genealogy, Stamboom, PRO-GEN">
  <meta name="Robots"      content="index,follow">
  <meta name="Author"      content="#USERNAME$!">
  <meta name="Reply-to"    content="#EMAIL$!">
  <meta name="PG File Set" content="#FILE$!">
  <meta name="Date/Time"   content="#DATE$! #TIME$!">
  <meta name="Copyright"   content="(C) #YEAR(DATE$)! #USERNAME$! All rights reserved.">

  <link rel="stylesheet" href="#PREFIX!-main.css" type="text/css" media="all">
  <link rel="stylesheet" href="#PREFIX!-scrn.css" type="text/css" media="screen">
  <link rel="stylesheet" href="#PREFIX!-prn.css" type="text/css" media="print">
  <!-- GK: hieronder wordt de javascript bibliotheek opgeroepen 
    en de bookmark-string gevormd uit de met de URI meegestuurde informatie -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
        var data;
        $(document).ready(function()
        {
                var anchor = location.search.substring(1);
                if (anchor != "") window.location.href = "#"+anchor;
        })
  </script>
</head>

<body class="cssmain">

<!-- Begin PRO-GEN text -->

Hoe gebruik je het vervolgens? Stel je voor, dat de stamboom is te vinden met demo-ref.gerkoper.nl (die bestaat echt!). Bij die webstek is naam demo-frm3.htm veranderd naar index.html. Daardoor zijn er verder geen toevoegingen nodig aan de naam. Uit de index leren we dat bijvoorbeeld Anna Paulowna is te vinden op de pagina demo-ref.gerkoper.nl/demo-ref-42.htm#BM4.htm (Dat is de naam van de link die tevoorschijn komt als de cursor er op staat). Om nu de browserpagina te openen zodat Anna Paulowna in het persoonsgevevens-venster komt tikken we op de opdrachtregel demo-ref.gerkoper.nl/index.html?demo-ref-42.htm?BM4. Met index.html roepen we de gewone venster-indeling op en met de specificatie na de vraagtekens geven we de inhoud van het persoonsregister. Let er op dat we het bookmark-teken # hebben veranderd in een vraagteken.

Hoe het werkt? Laten we de veranderingen bekijken in bovenstaande html-code. Eerst het hoofdbestand CSS-FR3L.PTM :

  • Op regel 28 wordt het venster geopend met daarin de gegevens van de op dat moment gekozen persoon. De bijbehorende paginacode staat bij src, bij het opstarten wordt dat de eerste persoon in de stamboom. Die regel moet veranderd worden en om die door het javascript te laten vinden voegen we er een id aan toe.
  • Op regel 25 staat de instructie die er voor zorgt dat de daaronder staande venster-specificaties worden uitgevoerd. Met de onload-instructie wordt het javascript aangeroepen die de goede paginacode aan de src toevoegt.
  • In regels 13-21 staat de aanroep van de javascript-bibliotheek en de instructies die nodig zijn om alles wat in de opdrachtregel achter het vraagteken staat te gebruiken als specificatie van wat er aan persoonsgegevens getoond moet worden.

In het CSS-UTF.PTM wordt een soortgelijke functie vervuld: de resterende tekst wordt als bookmark geformatteerd; dit gebeurt in regels 20-30.

Er is nog een klein probleem: zonder voorzorgsmaatregelen komt de stamboompagina steeds in plaats van de tekst die we aan het lezen waren. Om dat te voorkomen kan de instructie gegeven worden om steeds in een nieuw tabblad/venster te openen. In principe kan de HTML-<a-tag zo worden ingesteld dat steeds hetzelfde tabblad/venster wordt gebruikt, bijvoorbeeld met target="pg". Bij wordpress lijkt dit niet te kunnen, in zelfgemaakte webpagina’s wel.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *