Linuchs: <base> ich brauche Ausnahmen

Moin,

Liederbücher im Verzeichnis musik/liederbuecher enthalten iframes mit Liedtexten aus dem Verzeichnis musik/liedtexte/. Deshalb in jedem Liederbuch:

<head>
...
<base href="../liedtexte/">
...

Nun kommen Seiten hinzu, die jeweils eine Grafik enthalten aus dem Verzeichnis musik/noten/:

<img src="../noten/super_trouper-1.svg" />

Die Grafiken werden vergeblich gesucht im Verzeichnis ../liedtexte/ und ich habe keine Möglichkeit gefunden, die base-Angabe für bestimmte Aufrufe zu umgehen.

Kennt jemand eine Möglichkeit?

fragt Linuchs

  1. Hi,

    Liederbücher im Verzeichnis musik/liederbuecher enthalten iframes mit Liedtexten aus dem Verzeichnis musik/liedtexte/. Deshalb in jedem Liederbuch:

    <head>
    ...
    <base href="../liedtexte/">
    ...
    

    Nun kommen Seiten hinzu, die jeweils eine Grafik enthalten aus dem Verzeichnis musik/noten/:

    Dann mußt Du halt entweder ab der Domain-Basis referenzieren, also "/was/auch/immer/musik/noten/DeineGrafik.svg", oder aber relativ zu liedtexte, also "../../noten/DeineGrafik.svg".

    Oder das base-Dingens ganz wegwerfen und immer relativ zur Domain-Basis arbeiten.

    cu,
    Andreas a/k/a MudGuard

    1. Dann mußt Du halt entweder ab der Domain-Basis referenzieren, also "/was/auch/immer/musik/noten/DeineGrafik.svg", oder aber relativ zu liedtexte, also "../../noten/DeineGrafik.svg".

      1. Habe die Liederbücher lokal ohne Server-Software, einige auch im Web. Die „vorlaufenden“ Verzeichnisse unterscheiden sich aus der Sicht des Browsers.

      2. relativ zu liedtexte wäre ../noten/ funktioniert ebensowenig wie ../../noten/

      3. „Das HTML Base Element (<base>) definiert die Basis URL für alle relativen URLs im Dokument. Das <base> Element darf nur einmal im Dokument vorkommen.” Quelle

      Erst jetzt fällt mir die Betonung auf HTML auf.

      Mal schauen, ob mit CSS was geht. Hintergrundbild?

      1. Hallo Linuchs,

        mach's doch noch mal klarer.

        <img src="../noten/super_trouper-1.svg" />
        

        Die Grafiken werden vergeblich gesucht im Verzeichnis ../liedtexte/

        relativ zu liedtexte wäre ../noten/ funktioniert ebensowenig wie ../../noten/

        Auf was genau greift der Browser denn zu? Das sollte das Netzwerktab hergeben.

        Wenn die Verzeichnisstruktur so ist wie Du beschreibst, sollte es ja eigentlich auch ganz ohne base Angabe funktionieren.

        Rolf

        --
        sumpsi - posui - obstruxi
      2. Mal schauen, ob mit CSS was geht. Hintergrundbild?

        Funktioniert. Javascript durchläuft einen CSV-String mit Dateinamen und füllt die Seiten entweder mit einem iframe oder einer Grafik:

        rows[i][k['url']] = "super_trouper_imb-1.svg";

        if ( rows[i][k['url']].indexOf ( ".svg" ) != (-1) ) {
          // Noten
          obj.style.backgroundImage = "url(../noten/" +rows[i][k['url']] +")";
          obj.style.backgroundSize  = "100% 100%";
        } else {
          // Text
          obj.innerHTML += "    <iframe src=\"../liedtexte/" +rows[i][k['url']] +"\"></iframe>\n";
        }
        

        Danke fürs Mitdenken und die mentale Unterstützung.

        Gruß, Linuchs

        1. Hallo Linuchs,

          du hast also entweder ein Bild oder einen iframe, und entscheidest per JavaScript, welche Ressource eingebunden wird. Na gut. Das könnte man auch im PHP am Server machen, dann funktioniert die Seite ohne JS besser. Es sei denn, der ganze DOM-Teil wird ohnehin per JS generiert.

          Die relative Adressierung sollte sich durch den JS-Konstrukt aber nicht im geringsten verändern. Egal ob ich

          <div style="background-image: url(../noten/foo.svg)"></div>
          

          oder

          <img src="../noten/foo.svg">
          

          angebe, die Adressierung erfolgt relativ zum HTML Dokument bzw. zur <base> URL.

          Dein eigentliches Problem existiert also weiterhin - oder seine Lösung war nur einen Browser-Refresh entfernt.

          Rolf

          --
          sumpsi - posui - obstruxi
          1. Hallo Rolf,

            ich weiß, einen Glauben korrigieren zu wollen, ist ziemlich aussichtslos.

            Es sei denn, der ganze DOM-Teil wird ohnehin per JS generiert.

            Das ist der Fall, denn ich generiere die Liederbücher lokal ohne PHP. Schon die Aufteilung der Seiten auf die A4-Blätter ist eine kleine Wissenschaft für sich und abhängig davon, ob ich das Liederheft als A4, A5 oder A6 haben möchte. A6 ist fürs Publikum zum Mitsingen und Behalten. Unsere Werbung sozusagen.

            Ich baue erstmal die Seiten auf und gebe jeder eine ID, z.B. seite_12. Im zweiten Durchlauf werden die Titel aus dem CSV-String ins Inhaltsverzeichnis seite_01 kopiert, im dritten die Lieder auf die Seiten.

            Da die einzelnen Lieder HTML-Dokumente mit relativen Schriftgrößen sind, muss ich pro Lied (im iframe) nur eine kleine CSS-Datei für A5 oder A6 hinzuladen, um die Größenangaben der A4-CSS zu überschreiben.

            Du hast Recht, dass deine beiden Beispiele von base beherrscht werden, denn beide sind HTML. Mit Javascript macht das aber einen Unterschied:

              // CSV-Titel durchlaufen
              for ( let i=1; i < rows.length; i++ ) {
                //console.log( "iframe "  +("00" +rows[i][k['seite']]).slice(-2) );
                var obj = document.getElementById( "lied_" +("00" +rows[i][k['seite']] ).slice(-2) );
                if ( rows[i][k['url']].indexOf ( ".svg" ) != (-1) ) {
                  // Noten
                  obj.innerHTML += "    <img src=\"../../noten/" +rows[i][k['url']] +"\">\n";
            /*
                  obj.style.backgroundImage = "url(../noten/" +rows[i][k['url']] +")";
                  obj.style.backgroundSize  = "100% 100%";
            */
                } else {
                  // Text
                  obj.innerHTML += "    <iframe src=\"../liedtexte/" +rows[i][k['url']] +"\"></iframe>\n";
                }
              }
            

            Wenn ich die Noten-Grafiken per <img> (= HTML) einbinde, werden sie wegen <base> im Verzeichnis liedtexte vergeblich gesucht. Gebe ich der Seite aber per JS die Noten als backgroundImage, ist HTML ausgetrickst und es funktioniert.

            Gruß, Linuchs

            1. Hallo Linuchs,

              irgendwas ist merkwürdig bei Dir.

              Nach meinen Versuchen, die ich gerade anstelle, greift eine <base> Angabe bei:

              • src-Attributen von iframe und img
              • href-Angaben von <link rel="stylesheet">
              • url() Angaben für background-image im style-attribut
              • url() Angaben für background-image in einer CSS Regel, die mit <style> im <head> eingesetzt ist

              Man könnte noch mehr probieren, aber ich würde sagen: <base> greift spec-konform bei allen Ressourcen-Referenzen, die aus dem HTML Dokument heraus gemacht werden. Auch, wenn diese Referenzen durch JavaScript erzeugt wurden. Das habe ich soeben ausprobiert.

              Die base-Angabe greift dann und nur dann nicht, wenn die Ressourcen-Referenz nicht aus dem .html Dokument heraus erfolgt, sondern indirekt aus einer externen .css Datei. In diesem Fall wird das Bild relativ zur .css Datei gesucht.

              Wenn bei Dir <div style="background-image:url(../noten/foo.svg)"></div> funktioniert, dann muss auch <img src="../noten/foo.svg"> funktionieren, und <img src="../../noten/foo.svg"> kann nicht funktionieren.

              Ist dein Liederbuch online? Wenn ja, magst Du die <img...> Version, die bei Dir nicht funktioniert, einmal für mich aufrufbar machen? Ich würde mir das gerne einmal anschauen. Ich nehme an, dass da noch andere Effekte hereinspielen und der Pfad nicht das Problem ist. Deswegen mein "glaub ich nicht".

              Rolf

              --
              sumpsi - posui - obstruxi
  2. Hallo Linuchs,

    sorry, aber das kann jetzt eigentlich nicht sein.

    Ich nehme mal an, dass ../liedtexte/ in absoluter Version /buch/musik/liedtexte/ lautet.

    Wenn das die base ist, dann wird ../noten/super_trouper-1.svg zu /buch/musik/liedtexte/../noten/super_trouper-1.svg, was sich zu /buch/musik/noten/super_trouper-1.svg normalisiert, und das ist genau das, was herauskommen soll.

    Ich habe das gerade auf meinem PC nachgestellt, isso, mit Chrome und Fuchs. Von daher: Hä?

    Hast Du in deinem Beispiel von der Realität deines Webservers abstrahiert, und bist dabei zu weit gegangen, so dass man das Problem nicht mehr sieht? Ich sehe es jedenfalls nicht.

    Es gibt eine Kleinigkeit, die bei Dir eigentlich falsch ist. Die href bei base ist eine URL, und sollte damit eine Datei spezifizieren. Du endest auf / und setzt damit einen Dateinamen von "". Wenn ich RFC 3986 richtig lese, ist das keine valide URL. Es funktioniert zwar, weil der Browser sich eh nur für das Directory interessiert, in dem sich die per base benannte Ressource befindet, aber eigentlich ist's nicht ganz ok. Und für dein Problem ist's auch egal.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Rolf,

      Es gibt eine Kleinigkeit, die bei Dir eigentlich falsch ist. Die href bei base ist eine URL, und sollte damit eine Datei spezifizieren.

      woraus leitest du das ab? Die Erklärung zu base im Wiki lese ich anders. Danach gibt das href-Attribut von base nur ein Basis-Verzeichnis[1] an, das dann als Präfix für relative URLs hergenommen wird.

      Was mich am Beispiel von Linuchs viel mehr irritiert: Er gibt auch als base einen relativen Pfad an. Ich bin bisher immer davon ausgegangen, dass dort ein absoluter Pfad stehen müsste. Nun ja, irren ist menschlich.

      Live long and pros healthy,
       Martin

      --
      Ich stamme aus Ironien, einem Land am sarkastischen Ozean.

      1. Ich kriege immer eine leichte Gänsehaupt, wenn im URL-Kontext von Dateien und Verzeichnissen gesprochen wird ↩︎

      1. Hallo Martin,

        ich litt das aus der Tatsache ab, dass die href eine URL sein muss und dass "../foo/" keine gültige URL ist. Ich hatte den RFC so verstanden, dass der Path-Teil einer URL nicht auf / enden darf.

        Wenn ich genauer hingucke, dann muss man die Angabe segment:*pchar aber so deuten, dass ein leeres Segment als letzter Teil der URL gültig ist

        Sorry und danke für den Hinweis.

        Rolf

        --
        sumpsi - posui - obstruxi
  3. Hi there,

    Die Grafiken werden vergeblich gesucht im Verzeichnis ../liedtexte/ und ich habe keine Möglichkeit gefunden, die base-Angabe für bestimmte Aufrufe zu umgehen.

    Kennt jemand eine Möglichkeit?

    fragt Linuchs

    Tip: in der HTML-Ausgabe in der Browserkonsole nachschauen. Dort steht dann immer im Klartext, welchen Pfad der Browser in Wirklichkeit erwartet und eine Konstruktion wie ..\..\..\irgendetwas wird aufgelöst - dann sieht man in den meisten Fällen sofort, worin der Fehler besteht...