Question

我正在尝试构建一个非常基本的小部件系统，根据小部件的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代码写入iframes文档。

    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代码才停止工作时。

任何人都可以就问题是什么以及是否有更好的方法来解决这个问题？

Answer 1

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

Javascript视频无法在我的小部件应用中加载

1 个答案: