Button hinzufügen - Druckversion

Button hinzufügen - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Button hinzufügen (/showthread.php?tid=2033)

Seiten: Seiten: 1 2

Button hinzufügen - Oly - 16.01.2023

Hallo zusammen,

ich lade eine Seite und möchte gerne einen Button hinzufügen.
Mein Versuch war so, doch einen Button sehe ich nicht, kann mir bitte jemand helfen und sagen wie ich das hinbekomme?

Code:
<!DOCTYPE html>

<html lang="de">

<head>

  <meta charset="UTF-8">

  <title>HTML5- und JavaScript Lernspiel</title>

  <script src="bienen.js"></script>

  <link href="bienen.css" rel="stylesheet">

</head>

<body>

<h1>Testprojekt</h1>

<script> window.location="https://de.zir-online.com";

// HTML-Button über JavaScript eine Funktion zuweisen

// Funktion beim laden der Seite aufrufen

window.addEventListener("load", function() {

 // Überprüfen ob die ID (Button) auf der Seite vorhanden ist (Optional).

 if (document.getElementById("button")) {

  // Der ID den Event-Handler 'click' hinzufügen,

  // als Event die Funktion 'test' aufrufen.

  document.getElementById("button").addEventListener("click", test);

 }

});

function test() {

 alert('Test!');

}

</script>

<button type="button" id="button">Klick mich!</button>

</body>

</html>

doch leider sehe ich keinen Button

RE: Button hinzufügen - admin - 17.01.2023

Erklär mir mal bitte, was du vorhast ?
du bist noch Anfänger, richtig?

Erstmal der Code

Code:
https://de.zir-online.com

Leitet dich auf der Seite um.

Dann schreist du das du einen Button hinzufügen möchtest.
Laut deinen Code

Code:
<button type="button" id="button">Klick mich!</button>

Ist da ein Button

Kann das sein das die Seite de.zir-online .com nicht deine Seite ist und du warum auch immer da einen Button haben willst?
Falls ja geht sowas mit Greasemonkey.

Falls nicht, erkläre mir, was das mit der Umleitung zu tun hat , bzw was du genau vorhast und was der Button machen soll

RE: Button hinzufügen - Oly - 17.01.2023

ich dachte, wenn ich aus meinem Programm später mal diese Website aufrufe, ich ihr einen neuen Button verpassen könnte um eine Druckoption hinzuzufügen und leichter an Daten aus dieser Seite bekommen könnte. so kurz ausgedrückt.
Wenn es einen einfacheren Weg gibt, sowas zu realisieren, dann gerne diesen. Hatte eine Idee die ich umsetzen versuchte

RE: Button hinzufügen - admin - 17.01.2023

(17.01.2023, 09:18)Oly schrieb: ich dachte, wenn ich aus meinem Programm später mal diese Website aufrufe

Was ist das für ein Programm?
Um auf Fremdenwebseiten was einfügen zu können, brauch man bestimmte Programme, die das können (ist nicht mein Gebiet), oder man nutzt Add-ons für den Browser oder Greasemonkey.

Damit könnte man da e

in Button einbauen, der das Drucken würde( das kann die Drucktaste der Tastatur aber glaube ich auch)

Was ist das den für eine Seite? Was willst du den da genau drucken?
Ich kenne die Seite nicht und sehe nur die Login Felder

RE: Button hinzufügen - Oly - 18.01.2023

Das mit dem Button war nur eine Idee und scheinbar funktioniert es nicht. Ein Add on wäre scheinbar die Lösung, man klickt ja auch was ähnliches an wie ein Button.
Ich möchte die Gerätedaten aus Kundenaufträgen rausholen und nur diese ausdrucken

RE: Button hinzufügen - rzscout - 18.01.2023

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Deine Seite</title>

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            let newElem = document.createElement('button');

            newElem.textContent = "Drück mich!";

            newElem.addEventListener('click', function() {

                window.print();

            });

            document.body.appendChild(newElem);

        });

    </script>

</head>

<body>

</body>

</html>

Hier ein Beispiel für dich.

RE: Button hinzufügen - admin - 18.01.2023

Ich habe auch mittlerweile nee Idee wie du bestimmte Sachen auswählen kannst zum Drucken.

Normalerweise bräuchte ich Zugang zu der Seite, um die bestimmte Tabellen oder sonst was auslesen zu können.

Wenn das so funktioniert wie ich das will kannst du das Script dann auf alle Webseiten nutzen.
Melde mich später, wenn erfolgreich war

RE: Button hinzufügen - rzscout - 19.01.2023

(18.01.2023, 21:40)admin schrieb: Ich habe auch mittlerweile nee Idee wie du bestimmte Sachen auswählen kannst zum Drucken.

Normalerweise bräuchte ich Zugang zu der Seite, um die bestimmte Tabellen oder sonst was auslesen zu können.

Wenn das so funktioniert wie ich das will kannst du das Script dann auf alle Webseiten nutzen.
Melde mich später, wenn erfolgreich war

Habe auch eine Lösung damit nur bestimmte Inhalte gedruckt werden. Das Zauberwort heißt CSS Media-Queries.

Code:
@media print {

Deine CSS-Selektoren und Klassen

}

RE: Button hinzufügen - admin - 19.01.2023

(19.01.2023, 00:40)rzscout schrieb: Habe auch eine Lösung damit nur bestimmte Inhalte gedruckt werden. Das Zauberwort heißt CSS Media-Queries.

Code:
@media print { Deine CSS-Selektoren und Klassen }

Das ist richtig , dafür muss man aber erst die Elemente auslesen, die wir haben will.
Da er irgendwelche Kundendaten auslesen will ( in Tabelle oder sonst wo ),muss man irgendwas bauen, damit er das markieren kann oder sonst was. Dann soll das Script den Rest machen( z. B. die CSS erstellen für den Druck).

Am schlimmsten ist es ja das ich die Seite nicht kenne und kein Zugang habe , sonst hätte man da schon längst was machen können.
Aber ohne Quellcode der Seite muss man irgendwie was erstellen, was durch Markieren der Texte, Tabellen, Elemente oder sonst was die Selektoren ausliest und dann den Rest macht.

Hast du da auch nee Idee?

RE: Button hinzufügen - Oly - 20.01.2023

Hallo zusammen,

vielen Dank an allen für die Teilnahme und Unterstützung!
Ich hatte mich etwas mit Add on`s auseinandergesetzt da ich das für eine schöne Lösung fand. Habe mir tuts angesehen die vielversprachend aussahen um an Ende festzustellen das Manifest V2 abgeschafft wird und V3 aktiv ist Sad

Könnt ihr mir Tuts sagen die V3 basierend sind für Anfänger?

jetzt ein paar Bilder womit ich es hoffentlich etwas mehr verdeutlichen kann, was ich genau möchte.

[Bild: 20230120095403799bad5a3b514f096e69bbc4a7896cd9.jpg]

der besagte Button Shy

, als Add on eine coole Idee.

Als nächstes Daten die im Auftrag zu sehen sind

[Bild: 20230120095403f3ccdd27d2000e3f9255a7e3e2c48800.jpg]

so sieht es im Browser aus.

als nächstes wie es im Quellcode aussieht

[Bild: 20230120095403156005c5baf40ff51a327f1c34f2975b.jpg]

aus dem möchte ich jetzt z.B. Die Aufragsart und Auftrag vom rausholen, um beim Bsp. zu bleiben, wenn ich jetzt das Add on Button klicke, das Popup kommt, mir diese Daten anzeigt und ich es modifiziert ausdrucken kann, schön groß auf einem Blatt Papier. das wars

Wie bereits erwähnt, wäre es toll, wenn ihr mir Seiten nennen könnt für Einsteiger , wo es um Add ons geht, finde das ne Coole Sache Smile

Danke