Rolf B: Dynamische Links?

Beitrag lesen

Hallo Rolf,

die Steuerelemente fehlen, weil Du es nicht angefordert hast. Hier ist dokumentiert, was man noch alles einschalten kann. Beachte, dass "Chrome" hier die diversen Features des Browserfensters meint (sprich: das chromglänzende Rahmenwerk um den Webseiteninhalt herum) und nicht den Chrome-Browser.

Was Du zeigst, enthält Tippfehler. Da steht return false"" - das muss return false;" heißen. Das ist das Problem bei onclick: Das JavaScript steht als Text in einem HTML Attribut und man muss spitz aufpassen, dass alle Anführungszeichen richtig sind. Vor allem, wenn das Script selbst Anführungszeichen braucht.

Von window.open hatte ich Dir abgeraten. Wenn es für deinen Fall hinreicht, okay. Du musst dann nur dreimal klicken - mit window.open und einem Fenster pro Chart bekommst Du eine Einklick-Lösung nicht hin. Die Browser lassen pro User-Interaktion genau EINEN window.open zu. Weil blöde Werbespammer das missbraucht haben, um den Screen des Users mit Fenstern zu fluten.

Die Angabe von target="blank" für den Link brauchst du nicht. Dein onclick Handler endet auf return false;, das unterdrückt die Standardreaktion des Browsers auf den Klick, und es wird nur window.open ausgeführt. Dessen zweiter Parameter (bei Dir das 'd', 'w' und 'm') übernimmt die Aufgabe des target-Attributs. Es gibt hier einen speziellen Wert, nämlich '_blank', um IMMER in einem neuen Fenster zu öffnen. Es kommt natürlich darauf an, ob Du das willst. Ein konkreter Name wie d, w oder m sorgt dafür, dass ein erneuter window.open mit gleicher Namensangabe sich im gleichen Fenster öffnet und damit den alten Inhalt überschreibt.

Da deine Links von Libreoffice generiert werden, relativiert sich das prinzipielle Problem deiner Lösung: das onclick Attribut. Sowas macht man heutzutage eigentlich anders, man hält JavaScript aus dem HTML heraus, aber ich nehme an, das ist Dir bei generiertem Code egal.

Wenn Du eine Einklick-Lösung willst, lässt sich das mit JavaScript und einem parametrierten HTML durchaus lösen. Ich zeig's einfach mal.

(1) Ein zentraler Click-Handler

Im <head> Bereich deiner Link-Seite bringst Du dieses Scriptlein unter:

<script>
document.addEventListener("click", function(e) {
  let link = e.target;
  if (link.tagName != "A" || !link.classList.contains("tripleChart"))
    return;
  let url = link.href +
      "?img1=" +encodeURIComponent(link.dataset.chart1) +
      "&img2=" +encodeURIComponent(link.dataset.chart2) +
      "&img3=" +encodeURIComponent(link.dataset.chart3);
   window.open(url, 'data', 'width=710,height=1120,left=0,top=0'); 
   e.preventDefault();
});
</script>

Das ist ein click-handler, der auf JEDEN Klick im Dokument reagiert. Darum fragt er als erstes, ob er von einem a Element mit class="tripleChart" ausgelöst wurde, und stellt gleich wieder die Arbeit ein, wenn es das nicht war. Andernfalls baut er die Ziel-URL aus Attributen des Links zusammen und macht eine Helper-Seite mit window.open auf. Statt mit return false; endet er mit Aufruf von preventDefault, das ist der Standardweg, um die Defaultaktion des Browsers zu übergeben. Das Fenster öffne ich mit 710px Breite, sonst bekomme ich bei mir einen horizontalen Scrollbar. Aber das sind Details 😉

(2) Die Links

Die Links dazu sähen dann so aus (der Lesbarkeit wegen auf Zeilen verteilt) - es ist natürlich nur EIN Link für alle 3 Charts. data-Attribute kann man im JavaScript mit der dataset-Eigenschaft nutzen und dienen zur Standard-Erweiterung von HTML Elementen.

<a class="tripleChart" 
   href="showImages.html" 
   data-chart1="https://finviz.com/chart.ashx?t=STZ&p=d"
   data-chart2="https://finviz.com/chart.ashx?t=STZ&p=w"
   data-chart3="https://finviz.com/chart.ashx?t=STZ&p=m">Finviz d/w/m</a>

Die showImages.html sollte im gleichen Ordner liegen wie die Index-HTML, dann braucht man keine besonderen Angaben für den Ort der Datei.

Und sie sieht so aus - ACHTUNG, MINIMALISMUS! Da ist keine Fehlerprüfung drin, sie erwartet immer genau 3 Bilder, hat keine Überschrift, sie legt fest, dass ein Bild mit 1/3 der Fensterhöhe angezeigt wird und ist nicht responsiv. Also eigentlich jede HTML Sünde für's Web, aber du brauchst ja nur einen fix dimensionierten Popup-Container für 3 Bilder. Für deinen Zweck sollte sie daher vollig hinreichen. Als Template für eine Internetseite dient sie nicht. Es ist im Prinzip eine reduzierte Version von Gunnars Vorschlag.

<!DOCTYPE html>
<html>
<head>
<title>Chartanzeige</title>
<style>
img {
   height: 33vh;
}
</style>
</head>
<body>
<script>
let parms = new URLSearchParams(document.location.search);

for (let i=1; i<=3; i++) {
   let img = document.createElement("img");
   img.src = parms.get("img" + i);
   document.body.appendChild(img);
}
</script>

Getestet habe ich das mit Chrome und Firefox unter Windows

Rolf

--
sumpsi - posui - clusi