Wie können dieselben JavaScript-Daten auf zwei verschiedene Arten an HTML übergeben werden?

Question

Ich habe Schwierigkeiten, meine JavaScript-Daten an HTML zu übergeben. Ich kann meine Videodaten an iframe senden, so dass eine Suche eine Liste eingebetteter Videos abruft. ODER Ich könnte meine html var gleich mit href setzen und eine Liste von Videos anzeigen, deren URL Link auf YouTube selbst verweist. Ich möchte diese Ideen kombinieren.

Mein Ziel ist es, eine schriftliche Liste von Videotiteln mit Miniaturansichten anzuzeigen. Wenn auf einen Link geklickt wird, sollte das Video in die aktuelle Seite eingebettet werden.

Das genaue Problem ist, dass ich erwartet, dass die OnClick-Funktion die playVid-Funktion zu starten, übergeben Sie die Video-ID-Daten, und senden Sie diese an den Iframe. Es tat es nicht. Ich bekomme den nicht erfaßten Referenzfehler playVid nicht definiert. Wie ist das so?

Update: 1) Versucht, playVid vor showResults zu setzen. Immer noch undefiniert.

2) Geändert onclick = "playVid (wert.id.videoId)"> zu onclick = "playVid ('+ wert.id.videoId +')"> Immer noch undefiniert.

3) Dies ist die Aktualisierung des Codes gemäß Ihren Vorschlägen. Es ist halb da. Etwas wird an iframe übergeben und der Videoframe wird eingebettet. playVid ist jetzt ohne Probleme definiert. Das Problem ist nicht die Datenquelle. Es funktioniert perfekt, bevor wir versuchen einzubetten. Ich werde jetzt ein Bild von meinen Fehlern posten, die jetzt über Chrome-Erweiterungen sind, was seltsam ist.

4) Ich habe die Chrome-Fehler behoben, die ich durch die Installation der Chrome-Erweiterung Google Cast erhalten habe. Anscheinend wird Chrome bei eingebetteten YouTube-Videos manchmal Fehler geben, wenn Sie die Erweiterung nicht herunterladen, auch wenn die Erweiterung wirklich nichts mit eingebetteten Videos zu tun hat.

5) Letzte Hürde scheint YouTube Fehler "Errorcode" zu sein: "api.invalidparam"

SOLUTION

function showResults(results) { 
    var html = ''; 
    $.each(results, function(index,value) { 
    html += '<li><a href="https://www.youtube.com/embed/' + value.id.videoId + '"><img src="' +value.snippet.thumbnails.medium.url + '">' + value.snippet.title + '</a>)</li>';  }); 
    $('#results').html(html); 
    $('#results li a').click(function(e){ 
    playVid($(this).attr('href')); 
}); 
} 
function playVid(vidID) { 
var embedVid = vidID+'?autoplay=1'; 
document.getElementById('player').src = embedVid; 
} 

Answer 1

Try this:

1- Entfernen dieses Onclick = "playVid (value.id.videoId)" von showresults Funktion und ersetzen mit Zuweisen einer ID:

html += '<li><a href="#" id="'+value.id.videoId+'"><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + '</a>)</li>'; 

2- fügen diese nach jeder Schleife:

$('#results').html(html); 
$('#results li a').click(function(){ 
    playVid($(this).attr('id')); 
}); 

Answer 2

Sie wahrscheinlich benötigen, schreiben die gesamte iframe-Tag auf das Dokument auf Klick anstatt nur die Quelle eines vorhandenen iframes zu ändern. Erstellen Sie zunächst eine äußere div @ 800x440 den Iframe enthalten, und stellen Sie dann

outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>' 

Answer 3

Yo ur Problem mit dieser Linie sein kann ...

html += '<li><a href="#" onclick="playVid(value.id.videoId)"><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + '</a>)</li>'; 

diese stattdessen versuchen ...

html += '<li><a href="#" onclick="playVid(' + value.id.videoId + ')"><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + '</a>)</li>'; 

auch versuchen, die playVid() Funktion außerhalb dieser bewegen ...$(function(){