页面部分加载时 Javascript 访问被拒绝错误 - 为什么？

Question

在 thirdpartydomain.com 我想嵌入一个简单的 <script>从 mydomain.com/myscript.js 中提取脚本的标记，它只是创建了一个小的 <div>并从 mydomain.com/mypage.htm 中提取部分页面内容。

这是脚本，改编自:How to embed Javascript widget that depends on jQuery into an unknown environment

var myEmbedId = '12345';
var myEmbedContainerId = 'myEmbedContainer_' + myEmbedId;
document.write('<div id="' + myEmbedContainerId + '">IF ALL GOES WELL, THIS TEXT WILL BE REPLACED WITH MYPAGE.HTM CONTENTS');
document.write('</div>');

    (function (window, document, version, callback) {
        var j, d;
        var loaded = false;
        if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://mydomain.com/jquery-1.4.1.min.js";
            script.onload = script.onreadystatechange = function () {
                if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                    callback((j = window.jQuery).noConflict(1), loaded = true);
                    j(script).remove();
                }
            };
            document.documentElement.childNodes[0].appendChild(script)
        }
    })(window, document, "1.3", function ($, jquery_loaded) {
        $(document).ready(function () {
            alert('jquery loaded!');

            var myRefreshUrl = 'http://mydomain.com/mypage.htm';
            alert('refreshing from ' + myRefreshUrl);

            $.get(myRefreshUrl, function(data){ 
                var returnData = data;
                alert('return data: ' + data);
                $('#' + myEmbedContainerId).html(data); });

            alert('load complete v2');

        });
    });

在 IE 中，我收到来自 Javascript 的拒绝访问错误；在 Firefox 中，我没有返回任何数据。

这是怎么回事？

Answer 1

您不能创建 AJAX 请求到与托管当前窗口上下文的域不同的域。

要完成您所描述的内容，您可以执行以下操作:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://mydomain.com/dynamic.js?data=somepage.htm';
someContainer.appendChild(script);

在 dynamic.js 中，您可以将 HTML 内容包装在 document.write() 中。最终效果与在 DOM 中的同一点插入 AJAX 请求的结果相同。