Kann man mit JavaScript den Text einer Website anzeigen lassen?

Hallo, ich würde mir gern Blog- und Zeitungsartikel speichern und mit JavaScript später anzeigen lassen.

Das heißt, ich würde gern erreichen, dass der Code dafür sorgt, dass ein beliebiger Link ausgelesen und der Inhalt der Seite des Links ausgespielt wird.

Ist das möglich und wenn ja mit welcher Funktion?

Vielen Dank im Voraus!

3 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

15.09.2022, 08:33

Für dein Vorhaben reicht JavaScript allein nicht aus, da du 1. wohl den aktuellen IST-Zustand eines Beitrags archivieren möchtest und 2. - das Ganze wohl serverseitig gespeichert werden soll/muss. Neben JavaScript benötigst du beispielsweise NodeJS (HTTP Client, Fetch API, Axios etc.), eine passende REST API wie NewsAPI oder du schreibst dir ein eigenes Scraper-Script in Python oder ähnliches.

Wenn den aktuellen Zustand speichern möchtest, damit Inhalte nicht durch redaktionellen Änderungen verloren gehen, benötigst du auch irgendeine Datenbank, in der die ausgelesenen Beiträge bzw. der IST-Zustand gespeichert werden. Als Datenbank eignet sich z.B. PostgreSQL; MariaDB; MySQL; SQLite oder wenigstens ein JSON-File, in dem die Inhalte gespeichert und wieder ausgelesen werden.

Zu guter Letzt solltest du auch wissen, wie man mit den Developer-Tools arbeitet. Sei es z.B. das Einsehen/Auslesen von Strukturen und Elementen, damit dein Scrapter-Script am Ende auch die richtigen Inhalte erkennt, auswertet und weitergibt. Falls dir das zu aufwendig ist, kannst du dich auch auf GitHub nach entsprechenden Scripten umschauen. Diese schreibst du dann "nur" auf deine eigenen Bedürfnisse um.

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Mrgoodliife

Fragesteller

19.09.2022, 09:13

Vielen Dank, für die ausführliche Antwort! Da hab ich ja noch einiges, mit dem ich mich beschäftigen kann.

Ademi33

15.09.2022, 07:41

Das geht einfach mit einem iframe

Woher ich das weiß:Hobby – Jahrelange Erfahrung — Technikbegeistert

FaTech

15.09.2022, 07:46

iFrames sind alt. Sollte man vermeiden. Es gibt in vielen Fällen bessere Möglichkeiten

Ademi33

15.09.2022, 07:50

@FaTech

Genau und ids und sections sind auch alt, aber solange die funktionieren nutze ich die :)

FaTech

15.09.2022, 08:15

@Ademi33

Das geht aufgrund der Abwärtskompatibilität für alte Websites. In der heutigen Zeit sollte sowas vermieden werden. Es gibt heute viel bessere Lösungen. Man muss als Entwickler mit der Zeit gehen und nicht stehen bleiben. Wer sich weigert, was Neues zu lernen, der ist verloren. Besonders in der Berufswelt.

Ademi33

15.09.2022, 08:16

@FaTech

Never change an running system.

Aber klar, man muss mit der Zeit gehen

FaTech

15.09.2022, 08:20

@Ademi33

Never change an running system.

Wenn du eine alte Website hast, dann ist es verständlich. Eine neue sollte aber nicht auf alte Techniken bauen. Never change a running system beschreibt existierende Software, nicht neue.

Palladin007

15.09.2022, 08:27

@FaTech

Und selbst bei einer alten Website würde ich dem nicht zustimmen :D

Klar, eine alte Website ständig dem neusten Trend hinterher tragen, geht schief.
Aber wenn man daran arbeitet, sollte man auch nach aktuell etablierten Konzepten modernisieren, was man vertreten kann. Und der Rest (z.B. größere Dependency-Updates) muss dann eben regulär eingeplant werden.

Tut man das nicht, fällt das früher oder später immer auf die Füße und tut weit mehr weh, als alles, wovor man sich zuvor gedrückt hat. Je länger man wartet, desto aufwändiger (oder unmöglicher) wird so eine Aktualisierung, bis die ganze Website nicht mehr tragbar ist.

FaTech

15.09.2022, 08:32

@Palladin007

Stimmt schon. Viele Unternehmen wollen dies aber nicht und nutzen:

Never change an running system.

als Ausrede, um Geld zu sparen. Im Nachhinein merkt man dann immer, was man für Mist gebaut hat, aber dann ist zu spät

EinAlexander

15.09.2022, 12:21

@FaTech

iFrames sind alt

Ja, das iframe-Element ist alt in dem Sinne, dass es das schon seit HTML 4.01 gibt.

Sollte man vermeiden.

Ganz und gar nicht. Das iframe-Element ist gültiges HTML5 und damit keinesfalls veraltet. Nicht mehr Bestandteil von HTML 5 ist das frameset-Element

Ademi33

15.09.2022, 13:02

@EinAlexander

Danke, sah da auch keinen Sinn hinter

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

15.09.2022, 07:45

Starte ein Ajax GET request und Werte davon den Inhalt aus

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zur Frage

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

Braucht man SSH um Node JS apps zu Deployen?

Meine index.js :

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

http.listen(3000,()=>{
    console.log("working")
})
app.get('/index.html', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

Lokal funktioniert das, wenn ich localhost:3000/index.html

aufrufe erscheint ein Hello World,

aber wenn ich das ganze über FTP hochlade und url/index.html aufrufe :

Leere Html Seite und Konsole Error :

index.js:1 Uncaught ReferenceError: require is not defined

Also hat der Server garkein Node JS.

SSH hab ich aber garnicht, um dann mit irgendwelchen Ubuntu Commands das zu installieren, sudo apt install nodejs ...

Sry wenn es eine Dumme Frage ist aber ich hab bis jetzt nur Serverseitig Php gemacht und das ist sehr simple.

Man benutzt Fetch oder Ajax und im php skript echo "hello world"; und das wars.

Wollte mich an Node JS Ranwagen, das ganze ist aber viel komplexer.

(Bin bei All inkl)

...zur Frage

Ist beim IONOS Webhosting eine NodeJS-Installation möglich?

Ist es mit dem "Webhosting Plus"-Paket möglich, NodeJS zu installieren?

Ich habe mich mit putty über SSH mit dem Server verbunden, aber weiß nicht genau, was die nächsten Schritte sind.

Bash-Kommandozeile und anscheinend Debian steht da. Falls man mehr Infos braucht, stellt Nachfragen.

Es ist ein Standard-Website-Hosting-Paket, wie bei allen Anbietern All-Inkl, Strato.

SSH wahrscheinlich ohne Admin-Rechte, paar Domains inklusive, PHP vorinstalliert, usw..

Gibt es nicht sowas wie

wget -- nodejs@latest

oder so?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Nutz ihr Frameworks in JavaScript und warum?

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

Node.js: Wie kann ich den push-Fehler verhindern?

Code:

function file_tree(dir1, files1) {
 const filesArray = fs.readdirSync(dir).filter(file => fs.lstatSync(dir+file))
 for (let i = 0; i < filesArray.length; i++) {
  
 // Use stat() method
 fs.stat(dir+filesArray[i], (err, stats) => {
  if (!err) {
   if (stats.isDirectory()) {
    dir1.push(filesArray[i]);
   }
   else if (stats.isFile()) {
    files1.push(filesArray[i]);
    
   }
 }
 else
   throw err;
});
}
console.log(files1)
return dir1, files1
}
var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();
dir, files = file_tree(dir1, files1)
console.log(dir)
console.log(files);

Ausgabe:

undefined
[]
[]
    files1.push(filesArray[i]);
        ^
TypeError: Cannot read properties of undefined (reading 'push')
  at <dir>.js:32:16
  at FSReqCallback.oncomplete (node:fs:201:5)
Node.js v20.5.1

Frage:

Wie kann ich den push-Fehler verhindern?

Ich habe es so versucht, doch:

var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();

...zur Frage

Wie kann ich mir eine bestimmte Zeile aus der CMD als Textdatei oder Fehlermeldung ausgeben lassen?

Hallo,

ich benutze einen Befehl um Akkudaten bei Handys auszulesen. Da in dem CMD-Fenster sehr viel Text steht, möchte ich mir eine bestimmte Zeile in ein Textdokument speichern lassen und anzeigen oder noch besser eine "eigene Fehlermeldung" mit MSGBOX anzeigen lassen.

Wie genau ist das möglich, dass nur eine Zeile ausgelesen und angezeigt wird?

...zur Frage

JavaScript Texfeld leeren?

Ich habe folgendes Textfeld.

<input type="text" id="eingabe" placeholder="" value="">

Ich habe dazu in JavaScript in eine Funktion geschrieben die ausgeführt werden soll, wenn ein Button gedrückt wird. In dieser existieren folgende Zeilen Code.

document.getElementById("eingabe").setAttribute("value", "");
      document.getElementById("eingabe").setAttribute("placeholder", "Richtig");

Damit möchte ich erreichen, dass der Inhalt des Textfeldes geleert wird und in dem Textfeld im Hintergrund das Wort Richtig steht.

Jedoch wird das Textfeld nicht geleert.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen