Javascript 视频不会加载到我的小部件应用程序中答案

【问题标题】：Javascript video won't load in my small widget appJavascript 视频不会加载到我的小部件应用程序中
【发布时间】：2014-01-12 01:29:33
【问题描述】：

我正在尝试构建一个非常基本的小部件系统，该系统根据小部件的 ID 呈现一些内容和视频。我认为我有一个非常可靠的方法来做到这一点，直到我遇到一个阻止我的视频加载的错误。

我想知道 1) 我使用的方法是否是一种理想的方法，以及 2) 我遇到的错误是否可以修复。这是我的设置方式。

您将以下代码放在您希望小部件呈现的网站上：

    <script type="text/javascript" src="http://testing.womensforum.com/widgets/example.js"></script>
    <div id="wf_widget"></div>
    <script>Widget.Load('098f6bcd4621d373cade4e832627b4f6', 'wf_widget');</script>

这将调用下面的 JS 代码，它会向服务器发送一个 AJAX 请求，请求它应该呈现的 HTML 代码。完成后，我将一个空白 iframe 插入到 div 元素 (wf_widget) 中，用于将我从服务器获取的 HTML 代码写入 iframe 文档。

    var host   = 'http://testing.womensforum.com/widgets/example.php';
    var Widget = {
        Load: function(widget_hash, element_id) {
            var http = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");

            http.onreadystatechange = function() {
                if (http.readyState == 4 && http.status == 200) {
                    var html = http.responseText;
                    var iframe = "<iframe allowtransparency=\"false\" style=\"border: 1px solid #8c8b8b; z-index:10;\" width=\"300\" height=\"600\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";

                    var div = document.getElementById(element_id);
                    div.innerHTML = iframe;

                    var frame = div.getElementsByTagName("iframe")[0];
                    var doc = frame.contentDocument || frame.contentWindow.document || frame.contentWindow.window.document;

                    doc.write(html);
                }
            }

            http.open("POST", host, true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.send("widget_hash=" + encodeURIComponent(widget_hash));
        }
    };

在我尝试加载视频之前，这似乎工作得很好。要查看实时示例，您可以转到此处： http://testing.womensforum.com/widgets/example.html

您会注意到视频播放器已加载，但没有播放视频。但是，如果您查看 JS 代码在此处获取的 HTML： http://testing.womensforum.com/widgets/example.php

您会看到视频加载得很好，只有当我通过我们的 JS 管道传输该 HTML 代码时，它才会停止工作。

任何人都可以就问题所在以及是否有更好的方法来解决此类问题提供任何见解吗？

【问题讨论】：

标签： javascript php html iframe

【解决方案1】：

可能是这个原因？？使用 Ajax - 它具有跨域策略，如果文件或回调位于服务器的同一域内，则 ajax 将起作用/运行。如果您正在尝试实现跨域方法，请探索不同的途径，而不是 ajax - 如果我是正确的。

【讨论】：