aber ich weiß

[Linuchs]

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