Question

我想将一个页面（带有js，css）加载到同一文档中的DIV中，加载页面中的javascript不能应用于父页面内容。是否可以在加载的页面上设置类似默认上下文的内容？请参阅下面的基本示例

父页面：

<h1>normal</h1>
<span class="externalpage">data</span>

<script>
    $(document).ready(function () {
        $.ajax({
            url: "/ajax/Index",
            success: function (data) {
                $(".externalpage").html(data);
            }
        });
    })
</script>

/ ajax / Index“subpage” - 我不会改变此页面的内容。

<h1>ajax</h1>
<script>
    $(document).ready(function () {
        $("h1").text("xxxxxxxxxxxxx");
    })
</script>

Answer 1

似乎没有办法在jQuery中轻松设置默认上下文。但是，您可以通过缓存上下文来解决这个问题，只需从中调用.find()：

var $c = $('.externalpage');
$c.find('h1').text('xxxxxxxxxxxx');

这有点笨拙，你必须改变你编码的方式。

或者，您可以将其封装在一个函数中：

var $j = function(a) {
    return $(a, '.externalpage');
};

// and then you can use that like
$j('h1').text('xxxxxxxxxxxxx');

// if you want to revert to the global jQuery object, just use $ instead of $j

Answer 2

这很粗糙但应该有用。它将jQuery复制到另一个变量，然后用自定义函数替换$;因此你可以做到你想要的。

var $copy = $; // Original jQuery

$ = function() {
    if(!(this instanceof $)) return new $();
}; // fake jQuery function

$.prototype.ready = function(f) {
    f(); // fake ready, just execute function directly
}

$.prototype.text = function(t) {
    $copy(".externalpage h1").text(t); // set only the correct h1 to the text
}

现在，在提取的文件中：

$(document).ready(function () {
    $("h1").text("xxxxxxxxxxxxx");
})

会发生什么，它会执行假的jQuery函数，如上所定义，它应该可以按你的需要工作。

您必须在自己的文件中使用$copy作为真正的jQuery函数。

Answer 3

由于子页面已加载到主文档中并加载文档上下文，因此您无法以任何不需要更改子页面的方式更改子页面使用的上下文。

一些可能的解决方法：

如果子页面是完整页面，请将其加载到iFrame中。

完全杀死加载的脚本：

$.ajax ( {
    url:        "/ajax/Index",
    success:    function (data) {
        var safePage    = $(data).find ("script"). Remove ();
        safePage.appendTo ".externalpage");
    }
} );

加载2个jQuery副本，只有第二个是你为此目的而被攻击的副本。也许像：

<script> 
    $.noConflict ();

    jQuery(document).ready(function ($) {
        $.ajax({
            url: "/ajax/Index",
            success: function (data) {
                $(".externalpage").html(data);
            }
        });
    })
</script>
<!-- This next copy of jQuery only operates on the externalpage div -->
<script src="Your hacked version of jquery" ...

Answer 4

从您的评论中，您希望加载的脚本在某种“部分”文档上下文中执行，仅限于externalpage元素的内容（即只有加载的<h1>元素必须更改，不是<div>之外的那个。

这可以通过暂时覆盖$.find()（不是$.fn.find()，这不是同一件事）来实现，并替换externalpage参数中的context元素，如果它未指定或等于文档本身：

$(document).ready(function () {
    $.ajax({
        url: "/ajax/Index",
        success: function(data) {
            var $root = $(".externalpage");
            var realFind = $.find;
            $.find = function(query, context, extra, seed) {
                return realFind.apply(this, [
                    query,
                    context && context !== document ? context : $root[0],
                    extra,
                    seed
                ]);
            };
            $root.html(data);
            $.find = realFind;
        }
    });
})

jsFiddle提供了一个echo服务，我可以用来测试这个解决方案。您可以看到结果here。

jquery默认上下文

4 个答案: