About:blank?

Wie kann man einen Link erstellen, der beim Klicken, in der Addressleiste "about:blank" anzeigt aber anderen Inhalt hat?

03.09.2024, 19:40

Also z.b ein Formular beinhaltet aber unter der Addresse "about:blank"

1 Antwort

Ireeb

03.09.2024, 19:44

Du müsstest eine Erweiterung für den Browser schreiben, die die about:blank-Seite ersetzt. Funktioniert dann natürlich nur in Browsern, in denen besagte Erweiterung installiert ist. Anders geht es aber nicht, da about:blank keine Webseite ist, sondern Teil des Browsers.

Woher ich das weiß:Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur

Ähnliche Beiträge

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

...zum Beitrag

Html, Button mit href?

Hallo, wenn ich eine Button mit einem Youtube Link erstelle, wird der link auf geöffnet, wenn ich neben den Button klicke. Wie kann ich die href wirklich nur auf den Button legen, so dass der Link nur geöffnet wird, wenn ich auch nur auf den Button drücke? Bisher habe ich das so gemacht:

<button class="Button_Youtube"> Test Knopf </button> </a>

Dann ist wird der Link aber viel zu groß, so dass ich auch, wenn ich ich über/neben/unter den Button drücke geöffnet wird.

...zum Beitrag

Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

...zum Beitrag

wass Macht Dieser Code?

<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zum Beitrag

Text aus anderem Dokument in HTML Webseite verknüpfen?

Angenommen, ich hätte 2 HTML Dokumente 1.HTML und 2.HTML und in beiden werden z.B. alle Windows Versionen aufgezählten. Jetzt kommt Windows 12 hinzu. In diesem fall muss ich jetzt überall Windows 12 Hinzufügen.

Gibt es die Möglichkeit eine Datei Windows Versionen.[Dateiformat] zu erstellen, in der die Aufzählung eingetragen ist, so dass ich in 1.HTML und 2.HTML den Link von Windows Versionen.[Dateiformat] einfüge, und beide automatisch auf die Datei zugreifen, wo die Liste drin ist, und die Daten anzeigen?

Geht dass?

Welche Programmiersprache muss ich verwenden?

Wie füge ich die Dateien in HTML ein?

Könnt ihr mir ein Beispiel zeigen?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

Online Formular: Felder werden in der PDF verschoben?

bei einem Online Formular habe ich eine ... Code eingebaut, weil das Formular so groß ist. jetzt verschieben sich in der pdf alle felder nach unten, aber die sollen so bleiben wie im online formular. geht das?

<label for="Traeger" style="width: 110px;">Träger</label>

</div>

im Formular:

und in der pdf:

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen