HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

15.09.2022, 04:02

Auf deinem Screenshot ist nur der Debugger zu sehen. Konsolenausgaben gibt es keine.

Vermutlich lässt du pauschal alle XHR/Fetch-Requests abfangen. Das heißt, der Debugger stoppt den Ladevorgang an solchen Stellen und wartet dann logischerweise darauf, dass du die Fortsetzung des Ladevorgangs erlaubst.

Lade deine Webseite und öffne dazu in den Webentwicklungstools nochmals den Tab Sources. Dort gibt es eine Leiste mit den verschiedenen Registerkarten (Watch, Breakpoints, Scope, ...), man sieht sie auch schon auf deinem Screenshot. Klappe bei dieser die Registerkarten auf, die Breakpoint im Namen haben und schau, ob in ihnen Einträge wie z.B. Any XHR or fetch angehakt sind. Diese Haken müssen folglich natürlich raus.

Abgesehen davon lässt sich an deinem Einbindungsverfahren soweit nichts bemängeln. Das FontAwesome Kit wird wie erwartet zügig ausgeliefert (es wird ja auch von einem CDN ausgespielt), Probleme sehe ich darin keine. Was wiederum in deiner main.js passiert, weißt nur du.

NackterGerd

14.09.2022, 16:45

Natürlich sollte man das Sicht so machen.

Nur unnötige JS und unnötige Zugriffe auf andere Websites die abgeschlossen sein müssen bevor die Seite angezeigt werden kann

Emreyy

Fragesteller

14.09.2022, 16:46

Wie stattdessen ?

NackterGerd

14.09.2022, 23:56

@Emreyy

Icons und Bitmaps immer vom eigenen Server laden und nicht von externen.

Auch aus Datenschutzgründen ist solch ein Konstrukt sehr gefährlich und muss auch in der Datenschutz Erklärung deiner Website erwähnt werden.

Ähnliche Fragen

pixelmatch in browser nutzen?

Wenn ich den link auf der github seite verwende:

Code:

<script src="https://bundle.run/pixelmatch"></script>

wird keine datei gefunden, der pfad existiert nicht

wenn ich das letzte release runterlade und einbinde

Code:

<script src="myserver/js/pixelmatch/bin/pixelmatch"></script>

erhalte ich folgende fehlermedlung

Code:

const PNG = require('pngjs').PNG;
ReferenceError: require is not defined

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Was macht Kaspersky Lab auf meiner Webseite?

Hallo.

Dieser Fehlercode wird mir auf meiner Webseite in der Webkonsole angezeigt.

[Report Only] Refused to load the script ' https://gc.kis.v2.scr.kaspersky-labs.com/14B40763-305B-A14E-B821-9606F32DAC61/main.js' because it violates the following Content Security Policy directive: "script-src 'nonce-I88CsP9g8D8EzL-JsyITiA' 'report-sample' 'strict-dynamic' 'unsafe-eval' 'unsafe-inline' http: https: https://gc.kis.v2.scr.kaspersky-labs.com wss://gc.kis.v2.scr.kaspersky-labs.com". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Wenn ich auf diesen Fehler drücke kommt:

(function() {
  var KasperskyLab = (function (context) {
    function GetClass(obj) {
      if (typeof obj === "undefined")
        return "undefined";
      if (obj === null)
        return "null";
      return Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1];
    }

Es muss hier einen Zusammenhang mit Kaspersky Lab geben. Aber das warum verstehe ich nicht und was das für ein Fehler genau sein soll.

Vielen Dank im Voraus.

Mit besten Grüßen

Jens

...zur Frage

Javascript auslagern (HTML)?

Hallo,

wenn ich mit <script> einen Javascriptcode in HTML schreibe, geht alles, wenn ich das Script auslagere also in eine .js Datei schreibe und genau den gleichen Text wie im HTML Code dort einfüge, ohne das <script> </script>, dann geht es irgendwie nicht. Ich habe die Datei im Head so verlinkt <script src="js/button.js"></script>

Wieso geht es dann nicht mehr?

...zur Frage

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Flask Website lädt oft Ressourcen nicht?

Ausgangslage:

Flask Backend über CGI deployed
Alle genutzen Ressourcen (CSS, Images, Videos, etc.) werden über url_for() importiert
CGI daher, weil es sich um einen gemieteten Strato Server handelt und dieser im "Hosting Basic" Paket nur CGI akzeptiert. (Wer andere Infos darüber hat, gerne her damit)

Problem:

In 30% der Fälle lädt die Seite ohne Probleme, alle Inhalte werden korrekt geladen und angezeigt
In 35% der Fälle lädt die Seite zwar (auch die JS Datei, die die Loading Page nach dem vollständigen Laden der Seite entfernt) aber es fehlen Videos im Hintergrund
In weiteren 35% der Fälle wird der Loading Screen angezeigt, aber weder Bilder, Videos, CSS Dateien, noch die JS Datei, die den Loader entfernt, werden geladen, wodurch nur der Loader zu sehen ist.

Konsole schmeißt für jede Ressource den Fehlercode 500 aus

Error Log zeigt immer, immer wieder:

End of script output before headers: [NAME].cgi

Alle Dateien im Ordner cgi-bin, sprich alle Page relevanten Files haben die Permission 755

Ist der Server einfach manchmal überlastet? Und hat hier noch jemand Ideen, was ich noch versuchen kann?

Vielen Dank im Voraus!

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<head>

</head>

<body>

<h1 id="title">Today's Quiz</h1>

</ol>

</div>

</div>

<h2 id="score-title">Your Score</h2>

<button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

</div>

<h2>Answers :</h2>

</ol>

</div>

</body>

</html>

JAVA SCRIPT:

...zur Frage

Wie kann ich ein PHP-Array in eine externe JS-Datei übergeben?

Ich habe ein PHP-Skript, welches mir ein Array mit allen Ordnern aus einem Ordner wiedergibt (die Anzahl dieser Ordner kann sich verändern).

Dieses Array brauche ich aber in einer externen JS-Datei und die einzige wirkliche Möglichkeit, welche ich gefunden und verstanden habe, ist die, dass man Parameter in einem Skript Namen übergibt.

Also so:

<script type="text/javascript" src=test.js?parameter1=xy"></script>

Aber das begrenzt mich auf eine feste Anzahl, soweit ich das verstanden habe und damit kann ich leider nichts anfangen. ;(

Also ist meine Frage, wie ich dieses Array anders übergeben kann.

Ich bin noch eher ein Neuling in PHP und JS und hoffe einfach mal, dass diese Frage nicht allzu dumm ist. :P

(Meine Kenntnisse: Java = Experte; HTML, CSS = Fortgeschritten; JS, PHP = Neuling).

Schon einmal danke für jede Antwort.

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Electron Datei Öffnen und Inhalt in Script übergeben?

Ich möchte in meinem Electron Programm im Menü die Möglichkeit bieten eine Datei zu öffnen. Die Datei enthält JSON. Ich möchte den Inhalt dann in meinem Script weiterverarbeiten um ihn anzuzeigen. Das ist mein Code bis jetzt:

main.js

const { app, BrowserWindow, Menu } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');


const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });


    Menu.setApplicationMenu(mainMenu);


    mainWindow.loadFile(path.join(__dirname, "src/index.html"));
};


app.whenReady().then(() => {
    createWindow();


    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

menu.js

const { app, Menu, dialog } = require('electron');
const fs = require('fs');


const template = [
    {
        label: 'Datei',
        submenu: [
            {
                label: 'Öffnen',
                accelerator: 'CmdOrCtrl+O',
                click: async () => {
                    const files = await dialog.showOpenDialog({
                        properties: ['openFile'],
                        filters: [
                            { name: 'Json', extensions: ['json'] },
                            { name: 'Alle Dateien', extensions: ['*'] }
                        ]
                    });


                    if (!files || files.canceled || files.filePaths.length === 0) return


                    const file = files.filePaths[0];
                    const fileContent = fs.readFileSync(file, 'utf-8');
                    console.log(fileContent);
                }
            }
        ]
    }
]


module.exports.mainMenu = Menu.buildFromTemplate(template);

index.html (src/index.html)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1>Seite</h1>
    <script>
        console.log(data);
    </script>
</body>
</html>

Wie kann ich das umsetzten? Ich habe schon von IPC gelesen, es aber nicht wirklich verstanden.

...zur Frage

JS script richtig importieren?

Wenn ich meine JS Skripte in meinem HTML Dokument schreibe funktionieren die Super. Wenn ich diese dann aber in den Header Schreibe

 <script type="text/javascript" src="scripts/JavaScript.js"></script>

Dann geht alles was mit dem Script zutun hat nicht.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen