Fehler beim ausführen der 'postMessage' auf 'DOMWindow': Ziel/Herkunft mismatch http vs https

Entschuldige ich mich im Vorfeld als ich bin sehr verwirrt von meinem problem. Ich bin wirklich in einer Zwickmühle, denn dies verursacht ein problem auf meine Produktionsstätte.

Habe ich eine javascript-player auf meine Seite, welche Spiele durch die song-Listen, die gehostet werden kann, auf youtube, soundcloud oder vimeo. Gestern habe ich bemerkt, daß dieser Fehler die in der Regel entsteht, wenn Sie versuchen, laden Sie einen neuen song durch "hüpfen" mit den player-Tasten. Dieser Fehler gerade begonnen, in den letzten Tag oder zwei. Ich bin nicht zu sehen, etwas neues in der youtube-api release notes und dieser Fehler tritt auf mit Chrome, Firefox und Safari, also ist es wahrscheinlich nicht zu einer änderung in der browser. Etwas, das ich benutze, hat sich jedoch geändert, als ich noch nicht geschoben, neuen code in 18 Tagen.

Beispiel-Playliste ist hier: http://www.muusical.com/playlists/programming-music

Ich denke, dass ich isoliert haben, die Möglichkeit, den Fehler zu reproduzieren, hier sind die Schritte:

  1. Spielen ein youtube gehostet song.
  2. Springen zu einer anderen song in der Liste (ob durch drücken der skip Tasten oder direkt durch drücken der play-Taste die song ' s row-Element).

*Beachten Sie, dass, wenn das erste Lied in der playlist ist ein youtube-song, einfach überspringen zu einem anderen song sogar, ohne zu spielen die anfangs geladenen youtube-song zu produzieren den Fehler.

Im wesentlichen, der Fehler scheint aufzutreten, sobald Sie geladen haben, und/oder spielte ein youtube-song, und versuchen Sie zu überspringen und zu einem anderen song.

Lassen Sie mich wissen, wenn Sie finden, eine Ausnahme zu diesem Verhalten.

Sehe ich diese Fehlermeldung in der Konsole:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.muusical.com') does not match the recipient window's origin ('http://www.muusical.com').

Lade ich den player mit youtube javascript api:

new YT.Player('playlist-player', {
      playerVars: { 'autoplay': 1, 'fs': 0 },
      videoId: "gJ6APKIjFQY",
      events: {
        'onReady': @initPlayerControls,
        'onStateChange': @onPlayerStateChange
      }
    })

Produziert dieses iframe:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.muusical.com"></iframe>

Nach dem drücken der skip aus dem obigen youtube-song, das ist, was ich sehe, geladen in den iframe:

<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>

Unterstütze ich youtube -, soundcloud-und vimeo-songs. Wie es scheint, einmal einen youtube-song geladen wird, wird der "Ursprung" ändert sich von http zu https. Ich glaube nicht, dass es notwendig ist, umfassen die Einbettung von Methoden für die anderen hosts als dieser Fehler tritt auf, selbst wenn die gesamte Playliste nur von youtube, und es tritt nicht in einer playlist, die nur aus songs von soundcloud und vimeo.

Dies ist auch, wie ich bin laden die youtube javascript:

//Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Bitte lassen Sie mich wissen, wenn Sie mich brauchen, um etwas verdeutlichen und danke im Voraus für ein Blick.

InformationsquelleAutor wuliwong | 2015-01-11

  1. 3

    Habe ich ein bisschen gelesen über diese, SO einige posts hier und da und diesem link zu : https://code.google.com/p/gdata-issues/issues/detail?id=5788

    War ich über Sie einen Kommentar zu deiner Frage sagen, ich war immer verrückt über diese ... aber als ich angefangen habe zu beschreiben ist mein setup, ich fand einen Weg, um das Problem zu vermeiden ^^.

    Beginne ich mit einem leeren div element, und mit der Youtube-Iframe-API, schalten Sie ihn in eine iframe mit allen notwendigen Optionen.

    Ich habe mehrere divs wie dieser, und in der Regel verwenden die gleiche JS-variable zu speichern alle diese Spieler, aber ein zu einer Zeit (man ersetzt die andere, und so weiter ... - es könnte besser sein, ich weiß).

    Um das Problem zu lösen, hatte ich die Idee zu zerstören der Spieler mit youtubePlayer.destroy(); bevor ein neues bauen von einem anderen element. Nicht mehr JS-Fehler Blutung in meinem Chrome-Konsole :).

    Hoffe, es hilft, alle Literatur, die ich Lesen konnte, über http und https nicht mein Fall, denn ich bin nicht die Einstellung der iframe-URL, der mich und meine Webseite zufällig nicht https ...

    Habe ich wieder eine async call, statt eine statische script tag in meinem HTML-aber ich glaube nicht, dass dies notwendig war.

    BEARBEITEN : diese Fehlermeldung ist ziemlich irreführend, in der Tat, es nur vage heißt : Sie sind nicht mit der youtube-API den richtigen Weg 🙂

    Danke für die Antwort! Ich mache eigentlich ausführen der destroy () - Methode auf den player, wenn ich es loswerden, aber ich habe nicht wirklich alles durch gelesen die Diskussion in dem link, den Sie geschickt. Ich habe versucht, verschiedene Kombinationen der Einstellung von http/https in der Herkunft oder nicht, und die dynamisch geladenen Skript, aber ich werde gehen durch diese Diskussion ein wenig mehr wissenschaftlich und hoffentlich wird es auch endlich gibt. 🙂
    welches Ihrer Projekte wurden Sie mit diesem Problem auf? Scheint, wie Sie haben eine Reihe von Musik ähnliche Websites mit den Spielern. 🙂
    Sie ging tatsächlich auf meine Seite lol 🙂 weiß nicht, ob es eine gute Sache, es hier zu posten, aber hey ... es ist ja schon online 🙂 manec.fr : jedes mal, wenn Sie landen auf einem Planeten, öffnen Sie einen Abschnitt mit einem anderen youtube-player (unten rechts)
    Ich denke, Sie sind ziemlich frei in den Kommentaren erlaubt, links zu posten. Und die links sind eigentlich ok, die Antworten auch, aber Sie möchten vor allem, dass Sie auch post die relevanten Informationen in die Antwort auch im Fall geht der link später tot. Zumindest ist das mein Aktuelles Verständnis, wie zu vermeiden, immer busted von stackoverflow Polizei.
    Wow, ich fand es heraus. Sie waren auf etwas gestoßen! Youtube verwendet zum speichern der Zeichenfolge "Spieler" unter die statische variable player.L. So, ich verwendet, um zu überprüfen, ob der song wurde von Youtube als ich Unterstützung von ein paar verschiedenen Standorten. Wenn es ein Youtube-player, dann rief ich player.destroy() wenn nicht hatte ich handhaben es anders. So, Youtube-leise verändert die statische variable name M so, jetzt player.M == "player". JEEZ! Ich finde eine robustere Art und Weise zu überprüfen, ob der Spieler in der Tat Youtube.

    InformationsquelleAutor sodawillow

  2. 2

    @sodawillow die Antwort ist teilweise richtig, aber ich würde gerne geben die details, um die Lösung und was Sie verursacht, meinen code zu stoppen ruft die .destroy() Methode zum entfernen der youtube-player.

    Meine Website hat ein Spieler die swaps aus songs aus verschiedenen Websites, darunter Youtube. Es gibt verschiedene Methoden für das entfernen von einem Spieler abhängig von der Art es ist. Mein code überprüft das Vorhandensein der youtube-player ein und wenn geht die Prüfung dann verwendet er die .destroy() Methode, die nur den youtube-player hat. Das problem ist, dass YouTube verändert die Namen einiger der statischen Variablen auf Ihre player-Objekt. Zum Beispiel, wenn ich ein Spieler über:

    var player = new YT.Player('playlist-player', {
      playerVars: { 'autoplay': 1, 'fs': 0 },
      videoId: "gJ6APKIjFQY",
      events: {
      }
    })

    dann wäre es ja eine variable player.L welche den string "player". Also prüfen, ob der aktuelle player war ein YouTube-player und entfernen Sie es, ich Tat dies:

    if (player.L == "player") {
  player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}

    Irgendwann vor kurzem Youtube verändert die Position der Zeichenfolge "player" jetzt befinden sich an player.M. Ich konnte ändern Sie den obigen code, um zu überprüfen player.M statt player.L und dass funktionieren würde, aber um zu versuchen, um dieses Problem zu vermeiden in der Zukunft, die ich stattdessen implementiert haben:

    if (player.destroy) {
  player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}

    Solange Youtube nicht entfernen, die .destroy() Methode unangekündigte dies wird nicht dazu führen, keine Probleme.

    So, in Zusammenfassung, die Frage war, wie @sodawillow erraten, ich war nicht mit der .destroy() Methode zum entfernen der Youtube-player. Der Grund war, weil Youtube hat einige unangekündigte änderungen an Ihrer api, änderung der Lage von einigen der statischen Variablen.

    InformationsquelleAutor wuliwong

  3. 1

    Dieser Fehler gehört zu den Google-Youtube-API.

    Innen "https://www.youtube.com/iframe_api":

    if (!window['YT']) {
    var YT = {loading: 0, loaded: 0};
}
if (!window['YTConfig']) {
    var YTConfig = {'host': 'http://www.youtube.com'};
}

    Sie die Verwendung von http anstelle von https.

    Müssen wir überschreiben die 'host' - option 'widget_referrer' ist dasselbe wie 'Ursprung'.

    player = new YT.Player('player', {
          host: 'https://www.youtube.com',
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE'
...
          origin: "https://www.enziin.com",
          widget_referrer: "https://www.enziin.com"
}

    Goodluck.

    InformationsquelleAutor Enziin System

  4. 0

    Meine Lösung ist schreiben alle Youtube-player-Logik in eine separate Seite (so leer wie möglich) , und dass die Seite verwiesen werden, die in einem IFRAME tag.

    <iframe src="/youtube_frame/?data=SOME_DATA -%>" height="400px" width="100%" frameborder="0" border="0" scrolling="no"></iframe>

    Dann, Ihr youtube_frame.html wird so etwas wie dieses:

    <!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      //2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      //3. This function creates an <iframe> (and YouTube player)
      //   after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      //4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        //event.target.playVideo();
      }

      //5. The API calls this function when the player's state changes.
      //   The function indicates that when playing a video (state=1),
      //   the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        console.log("OnplayerStateChange");
        if (event.data == YT.PlayerState.PLAYING && !done) {
          console.log("OnplayerStateChange - If statement");
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

    (Als Randnotiz: mein Kontext ist, dass Prototype.js stört die Veranstaltung "OnStateChange', und wir können nicht entfernen Sie diese Abhängigkeit.
    Mit einem jsfiddle nicht sinnvoll wäre, das Problem zu reproduzieren, wie es hat einige Abhängigkeiten.
    Meine app hier ist eingebauten Schienen, und mit diesem plugin zum anzeigen einer Video-playlist: https://github.com/Giorgio003/Youtube-TV/)

    InformationsquelleAutor sequielo

Schreibe einen Kommentar