Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 25

Thema: javascript Iframe erstellen und in webseite ein binden

  1. #1
    Teeny
    Registriert seit
    01.12.2013
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard javascript Iframe erstellen und in webseite ein binden

    ich brauche eure hilfe
    ich möchte gerne ein Iframe erstellen und per userscript (greasemonkey) einbinden.

    ich habe dieen code geschrieben nur der funktioniert nicht

    code:
    var video = document.createElement("iframe");
    video.width = 640;
    video.height = 480;
    video.src = http://www.beispielseite.de
    var body = document.getElementsById('body');
    body.appendChild(video);

    ich habe es so gemacht wie in dem video URL: https://www.youtube.com/watch?v=DHnWiFsRN9M

    gezeigt wird nur bei mir geht es nicht ( bei mir ist nichts zu sehen
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    238
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    Da sind 2 Fehler drinne.
    1.Du hast die ' Vor und nach den Link vergessen genauso wie das ;
    2. document.getElemtsById gibt es nicht . wenn dann so document.getElementById
    Da du aber ein Tag ansprechen willst mußt du ihn mit TagName ansprechen. Da man nur ein body haben sollte in einen document kommt dann noch das [0] dazu. Was alles zusammen dann
    Code:
    document.getElementsByTagName('body')[0];
    ergibt.
    Willst du das iframe an einer anderen stelle anzeigen lassen, zb bei einer vorhandener Id ,dann muß es so sein wie bei 2.
    Ok ,zum schluß sollte das dann so aussehen.
    Probier es mal so
    Code:
    var video = document.createElement("iframe");
    video.width = 640;
    video.height = 480;
    video.src = 'http://www.beispielseite.de';
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(video);
    Habe es mal gerade hier getestet und es funktioniert so bei mir
    Geändert von basti1012 (01.10.2018 um 08:05 Uhr)

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    01.12.2013
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    wenn ich das so in mein userscript eingeben
    sehe ich garnichts
    Code:
    var video = document.createElement("iframe");
    video.width = 640;
    video.height = 480;
    video.src = 'http://www.beispielseite.de';
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(video);
    ich denke das ich den code erst von meinem userscript
    auf die webseite bringen muss damit es angezeigt wird

    wie bringe ich den code vom userscript auf die webseite

  4. #4
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    238
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    Was hast du den jetzt vor ? Du redest erst von userscript. Userscript ist nur auf dein Rechner und nirgenswo anders zu sehen. Mit Userscripte manipulierst du Internetseiten nur für dich. Wenn der Code auf deiner Homepage soll damit ihn jeder sehen kann muß er natürlich auf dein Server. Nur das hat mit Userscript nix mehr zu tun.

    Wenn du jetzt Javascript meinst ,dann muß du das auf deiner HP hochladen .
    Eine kompletter Code sieht zb so aus
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Iframe einbetten</title>
    <style>
      iframe{
        width:600px;
        height:500px;
        border:2px solid black;
        margin-left:calc(50% - 300px);
      }
    </style>
    </head>
    <body>
      <div id="inputiframe"></div>
    <script>
    var frame = document.createElement("iframe");
    frame.id='der-frame';
    frame.src = 'https://www.pennergame.de';
    var elem = document.getElementById('inputiframe');
    elem.appendChild(frame);
    </script>
    </body>
    </html>
    Den speicherst du in einer Datei ab und rufst ihn dann auf. Könnte aber sein das es nicht geht weil nicht jeder Seitenbetreiber erlaubt das einbinden auf fremder Seiten. Also wenn das iframe leer bleibt dann mußt du mal in der Fehlerkonsole kucken ob die CORS das blockt.

    PS: Achte drauf das deine Seite und die Seite die du einbinden willst beide http oder https haben. Hat man 2 verschiedene kann das sein das der Browser das auch blockt.

    Aber teste mal den Code jetzt auf deiner Webseite , nicht in Userscript.

    Soll das den für jeden sein ,oder nur für dich? Willst du das nur für dich als User script haben ,dann sollte das User script so aussehen.
    Code:
    // ==UserScript==
    // @name New Script
    // @namespace Iframe einbinden
    // @include  *
    // ==/UserScript==
    
    
    var elediv=document.createElement("div")
    elediv.id="inputiframe";
    document.getElementsByTagName('body')[0].appendChild(elediv);
    
    
    var link = document.createElement('style');
    link.rel="stylesheet";
    link.type="text/css";
    link.innerHTML='iframe{width:600px;height:500px;border:2px solid black; margin-left:calc(50% - 300px);}';
    document.getElementsByTagName('head')[0].appendChild(link);
    
    
    var frame = document.createElement("iframe");
    frame.id='der-frame';
    frame.src = 'https://www.pennergame.de';
    document.getElementById('inputiframe').appendChild(frame);
    Dann sag mal bescheid ob es läuft und vor allem was du genau vorhast
    Geändert von basti1012 (02.10.2018 um 07:27 Uhr)

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    01.12.2013
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    ich habe dein code ausprobiert es zeigt nichts an.

    bei youtube gibt es seit wochen immer mehr probleme mit dem abspielen der videos.
    weil immer mehr nur mp4 anbieten nur kein webm was das format für den HTML5 player ist.
    ich muss immer wenn ich ein video aufrufe und es kommt dann im playerfenster eine fehlermeldung.

    Dann klicke ich unten auf den downloadbuttton den das userscript youtubecenter darstellt und in dem memü das dann aufklappt
    klicke ich auf webm dann wird in einem neuen tab das video dierekt mit eine googlevideo.com url geöffnet und auch abgespielt.

    deshalb möchte ich ein zusätzliches fenster (frame iframe) legen damit automatisch dort das video abgespielt wird.

    ich habe auch schon ein userscript mit dem namen: WebM Inline Player gefunden und ausprobiert, leider geht das auch nicht

    wie lege ich ein eigenes playerfenster über das youtube playerfenster um dort die videos anzuzeigen, wenn der original youtube player nicht funktioniert um dort dierekt die googlevideo.com url zu öffnen
    Geändert von klam (02.10.2018 um 18:39 Uhr)

  6. #6
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    238
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    Eigentlich müsste das Script laufen. Kannst du den den Quadratischen Kasten vom Iframe sehen ? Auch wenn er Leer ist ,ist der den da irgendwo ?

    Wenn nicht dann teste mal das Script.
    Code:
    // ==UserScript==
    // @name Testen ob der Alert kommt
    // @namespace Iframe einbinden
    // @include  *
    // ==/UserScript==
    
    
    alert('Wenn du mich siehst sind wir schon ein schritt weiter');
    Wenn du das Richtig instalierst ,sollte auf jeder Seite ein Alert kommen. Wenn das funtioniert ,löscht du den Code aus den Script raus und kopierts den Code von gestern da rein. Dann sollte der iframe auch kommen ,auch wenn er leer ist.

    Kommt überhaupt kein Alert dann hast du vieeicht das Script nicht richtig installiert.
    1.Erstelle eine Textdocument und kopiere den Code darein.
    2. Speichere das document unter bla.user.js
    3.Öffne greasmonekey und installiere das Script,
    oder ziehe das Document einfach in das Browser fenster rein,
    oder Installiere es aus einen Link heraus http://sebastian1012.bplaced.net/hom...rss/00.user.js

    Wenn es erfolgreich installiert ist sollte nach einen Seiten reload der Alert kommen. Wenn nicht dann kuck mal ob Greasemonkey auch aktiviert ist und das Script auch. In den Installierten Scripten muß dann irgendwo dieses Script auftauchen
    Geändert von basti1012 (02.10.2018 um 22:57 Uhr)

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    01.12.2013
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    ich habe es nun geschaft das das iframe sichtbar ist.
    Bei youtube hängt es nun ganz unten an der seite.

    Wie bekomme ich das iframe über den player (das playerfenster auf youtube).

    Und wie lese ich die googlevideo.com url aus damit ich diese in dem iframe aufrufen kann
    Geändert von klam (03.10.2018 um 16:39 Uhr)

  8. #8
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    238
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    Finde doof das ich nicht weiß wo ich antworten soll. Probier es mal mit style angaben wie Position absolute und top left und co.
    Eigentlich sind feste positionen Mist ,aber da es ein Userscript ist und nur für dich past das schon.

    hier im Code siehst du ja die Css
    Code:
    link.innerHTML='iframe{width:600px;height:500px;border:2px solid black; margin-left:calc(50% - 300px);}';
    die ändern wir jetzt so
    Code:
    link.innerHTML='iframe{width:600px;height:500px;border:2px solid black; position:absolute;z-index:999;left:100px;top:200px;}';
    Mit den Top und Left werten mußt du halt rum spielen bis es passt. Das nächste mal warte einfach bis ich antworte und frage nicht in anderen Foren rum. Das macht man nicht vorallem weil die anderen gar nicht wissen was da los ist weil die den anfang dieses Thema gar nicht kennen.

    Das mit der Url auslesen für dein iframe hier muß ich erstmal testen. Aber melde mich nachher noch deswegen

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    01.12.2013
    Beiträge
    41
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    ich habe das
    Code:
    link.innerHTML='iframe{width:600px;height:500px;border:2px solid black; position:absolute;z-index:999;left:100px;top:200px;}';

    eingefügt, habe auch die grösse und position angepasst damit das Iframe genau über dem playerfenster bei youtube. Jetzt muss ich noch wissen wie ich die googlevideo url auslese um das video dierekt in dem Iframe abzuspielen. Du hast geschrieben das erstmal testen musst, wie weit bist du damit?
    Geändert von klam (05.10.2018 um 01:33 Uhr)

  10. #10
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    238
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: javascript Iframe erstellen und in webseite ein binden

    Ja ich muß von dir wissen welchenLink ? Meinstdu den Link den man im Browser oben eingibt ? Oder soll das Script sich einen anderen Lik von der Seite holen? Wenn ja dann gebe mkir mal eine Beispiel Seite undwelcherLink dann darein soll. Wenn das nicht der Link aus der Adresszeile istmuß ich ja wissen wo ich den link finde und auslesen kann.


    EDIT: Ich habe das jetzt so gemacht das er den Link in den Iframe einlesen tut der auch oben in der Browserleiste steht.
    Ergibt zwar kein sinn , aber ist jetzt erstmal so. Fals irgendwo anders ein Link ausgelesen werden muß man den halt nur noch auslesen .

    Code:
    // ==UserScript==
    // @name         iframein youtube einbinden
    // @namespace    Iframe einbinden mit userscripte
    // @include      *
    // @description  Fügt bei youtube einen iframe dazu mit den aktuellen Brrowser Linkk
    // @version      05.10.2018
    // @author       basti1012 sebastian1012.bplaced.net
    // @icon         http://www.lildevil.org/greasemonkey/images/IC-icon.png
    // ==/UserScript==
    
    
    function linkholen(){
    var link=document.URL;
    //var a = link.split('/');
    //a.forEach(function(entry) {
    //    console.log(entry);
    //});
    //var last=a.pop();
    //var suche=link.split('?');
    //suche.forEach(function(search) {
    //console.log(search)
    //});
      return link;
    }
    
    
    var elediv=document.createElement("div")
    elediv.id="inputiframe";
    document.getElementsByTagName('body')[0].appendChild(elediv);
    
    
    
    
    var link = document.createElement('style');
    link.rel="stylesheet";
    link.type="text/css";
    link.innerHTML='iframe{width:600px;height:500px;border:2px solid black; position:absolute;z-index:999;left:100px;top:200px;}';
    document.getElementsByTagName('head')[0].appendChild(link);
    
    
    
    
    var frame = document.createElement("iframe");
    frame.id='der-frame';
    frame.src = linkholen();
    document.getElementById('inputiframe').appendChild(frame);
    Geändert von basti1012 (05.10.2018 um 04:16 Uhr)

Ähnliche Themen

  1. Webseite Erstellen
    Von armend im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 11
    Letzter Beitrag: 10.03.2014, 23:24
  2. Box auf Webseite erstellen
    Von europachat im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 05.11.2011, 00:46
  3. Webseite nur teilweise im iframe anzeigen
    Von jumper2365 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.03.2007, 11:57
  4. CSS in Java-Code ein binden
    Von valefor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 02.02.2005, 14:29
  5. Kostenloses Webseite erstellen
    Von kleiner-stern im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.08.2004, 17:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •