jquery .load() 的问题

b.aspx内容是什么？还包含html之类的表情吧，加载过来DOM就是错误的，不能执行也很正常。改用iframe。

jq代码加载里面字符串包含script之类的JS 会被截断的..只有纯HTML代码
你要实现就只能A.ASPX页面把B页面的JS代码写过来 B.aspx放纯HTML代码

同意楼主，只能加载纯html界面

同意楼上，只能加载纯html界面

只能加载纯html界面吗？那么如果我的html内有link script 的话，加载后还能有效果吗？
我有两个案例，其中一个加载 b页面后 , b 页面的 js 能有效果。
另一个却不可以。

直接B界面的js放在 a.aspx 就OK 只好带路径的引入

我有2个案例，其中一个我在 b 页只放js link , 加载后在 a 页有效果。
另一个也是用同样原理，却失败了
是不是会有版本冲突的问题？

.load() 的实际原理是怎样的？
是不是把 b页面拷贝后粘贴在指定的 div 里面？
是这个意思吗　？　
我把 css 和 js 代码都写在 a 页了，可是加载 b页(只有html) 后，js的效果就变样了。

了解了，目前是 : 更新 JScript IntelliSense 时出错: \js\jquery-1.8.3.min.js: Object doesn't support this property or method @ 1:19325 猜测是导致加载后的问题这是什么造成的？
我用的是vs 2008 , 求解啊～～

一般都加载html 就把那个页给 webclient 输出成的 html 然后第一个a页再加载这个生成的静态页给第一个页可以加等待不知楼主是不是这个意识

将JS代码放在b.aspx的页面文件中，貌似在a.aspx中引用的js b.aspx里是不得执行的，但是你直接放在b.aspx里是会执行的

只能加载纯html界面，你要用脚本，在a.aspx页面用就可以。。

JS 脚本其实也是会加载的，但要注意页面载入完成之类的事件不会被触发(如 window.onload, $(document).ready 之类)，因为通过 Ajax 加载的时候，这些事件早已在之前被触发，所以你看不到这些事件中代码执行的效果，因而很多人认为不能加载 JS。
如果你要实现你所述的效果，可以在 b.aspx 页面中添加一个函数，如 initPage()，然后将原来在页面载入完成事件中执行的代码放到这个函数中，然后用如下的方式就可以了：
$('#xxx').load(url, function() { initPage(); });

请问如果a.aspx 和b.aspx 都调用了 jquery-1.8.3.min.js ，这在加载后会冲突吗？或是我只能在a.aspx 写呢？

尝试很多次了，还是不行。我把代码打上来，大家帮我看看吧这是a.aspx 代码 :<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryload1.aspx.cs" Inherits="Test.jqueryload1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <script type="text/javascript">
        $(document).ready(function() {
            $("#button").click(function() {
                $("#changeCon").load("event.html", function() { abc(); });
            });
        });
    </script></head>
<body>
    <form id="form1" runat="server">

    <input type="button" id="button" value="Click me" />
    <div id="tt" style="width: 20px; height: 2000px">
        <div id="changeCon">
        </div>
    </div>
    </form>
</body>
</html>

这是 b.apsx<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/scroll.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>    <style>
        body
        {
            font-family: "Trebuchet MS" ,Verdana,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.6;
            margin: 0px;
        }
        .middle_box
        {
            padding: 5px;
            height: 500px;
            width: 978px;
            position: relative;
            margin-top: 20px;
            margin-right: auto;
            margin-bottom: auto;
            margin-left: auto;
            border: 1px solid #999;
            -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 1);
            box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
        }
        .jp-container
        {
            width: 976px;
            height: 498px;
            position: relative;
            background: #fff;
            float: left;
        }
        /*---------------------------------------*/.event_box
        {
            width: 960px;
            height: 190px;
            margin: 10px auto 20px auto;
            box-shadow: 0 1px 5px rgba(0,0,0,.5);
        }
        .event_box img
        {
            margin: 10px 0 10px 10px;
            float: left;
            border: 1px solid #CCC;
        }
        .event_text
        {
            margin-left: 15px;
            margin-top: -5px;
            width: 450px;
            height: 181px;
            overflow: hidden;
            float: left;
        }
        .expired
        {
            margin-left: 860px;
            margin-top: 0px;
            width: 100px;
            height: 100px;
            background: url(images/expired.png);
        }
    </style>
</head>
<body onload="abc()">
    <div class="middle_box">
        <div id="jp-container" class="jp-container">
            <div class="event_box">
                <img src="images/5.jpg" alt="" width="440" height="170" />
                <div class="event_text">
                    <h2 style="text-decoration: underline">
                        h
                    </h2>
                    <p>
                        1
                    </p>
                </div>
                <div class="expired">
                </div>
            </div>
            <div class="event_box">
                <img src="images/5.jpg" alt="" width="440" height="170" />
                <div class="event_text">
                    <h2 style="text-decoration: underline">
                        h
                    </h2>
                    <p>
                        e
                        <html>
                        ), w
                        <img>. T .</p>
                </div>
                <div class="expired">
                </div>
            </div>
            <div class="event_box">
                <img src="images/5.jpg" alt="" width="440" height="170" />
                <div class="event_text">
                    <h2 style="text-decoration: underline">
                        h
                    </h2>
                    <p>
                        1。
                    </p>
                </div>
                <div class="expired">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这是b.apsx 的 js 代码
太长了，分了2段来上载  <script language="javascript" type="text/javascript">
        function abc() {
            $(document).ready(function() {
                (function($) {                    var types = ['DOMMouseScroll', 'mousewheel'];                    $.event.special.mousewheel = {
                        setup: function() {
                            if (this.addEventListener) {
                                for (var i = types.length; i; ) {
                                    this.addEventListener(types[--i], handler, false);
                                }
                            } else {
                                this.onmousewheel = handler;
                            }
                        },                        teardown: function() {
                            if (this.removeEventListener) {
                                for (var i = types.length; i; ) {
                                    this.removeEventListener(types[--i], handler, false);
                                }
                            } else {
                                this.onmousewheel = null;
                            }
                        }
                    };                    $.fn.extend({
                        mousewheel: function(fn) {
                            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
                        },                        unmousewheel: function(fn) {
                            return this.unbind("mousewheel", fn);
                        }
                    });
                    function handler(event) {
                        var orgEvent = event || window.event, args = [].slice.call(arguments, 1), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
                        event = $.event.fix(orgEvent);
                        event.type = "mousewheel";                        // Old school scrollwheel delta
                        if (event.wheelDelta) { delta = event.wheelDelta / 120; }
                        if (event.detail) { delta = -event.detail / 3; }                        // New school multidimensional scroll (touchpads) deltas
                        deltaY = delta;                        // Gecko
                        if (orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) {
                            deltaY = 0;
                            deltaX = -1 * delta;
                        }                        // Webkit
                        if (orgEvent.wheelDeltaY !== undefined) { deltaY = orgEvent.wheelDeltaY / 120; }
                        if (orgEvent.wheelDeltaX !== undefined) { deltaX = -1 * orgEvent.wheelDeltaX / 120; }                        // Add event and delta to the front of the arguments
                        args.unshift(event, delta, deltaX, deltaY);                        return $.event.handle.apply(this, args);
                    }                })(jQuery);
                $(function() {                    // the element we want to apply the jScrollPane
                    var $el = $('#jp-container').jScrollPane({
                        verticalGutter: -16
                    }),                    // the extension functions and options
extensionPlugin = {     extPluginOpts: {
        // speed for the fadeOut animation
        mouseLeaveFadeSpeed: 500,
        // scrollbar fades out after hovertimeout_t milliseconds
        hovertimeout_t: 1000,
        // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
        // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
        // also, it will be shown when we start to scroll and hidden when stopping
        useTimeout: false,
        // the extension only applies for devices with width > deviceWidth
        deviceWidth: 980
    },
    hovertimeout: null, // timeout to hide the scrollbar
    isScrollbarHover: false, // true if the mouse is over the scrollbar
    elementtimeout: null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
    isScrolling: false, // true if scrolling
    addHoverFunc: function() {         // run only if the window has a width bigger than deviceWidth
        if ($(window).width() <= this.extPluginOpts.deviceWidth) return false;         var instance = this;         // functions to show / hide the scrollbar
        $.fn.jspmouseenter = $.fn.show;
        $.fn.jspmouseleave = $.fn.fadeOut;         // hide the jScrollPane vertical bar
        var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();         /*
        * mouseenter / mouseleave events on the main element
        * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
        */
        $el.bind('mouseenter.jsp', function() {             // show the scrollbar
            $vBar.stop(true, true).jspmouseenter();             if (!instance.extPluginOpts.useTimeout) return false;             // hide the scrollbar after hovertimeout_t ms
            clearTimeout(instance.hovertimeout);
            instance.hovertimeout = setTimeout(function() {
                // if scrolling at the moment don't hide it
                if (!instance.isScrolling)
                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
            }, instance.extPluginOpts.hovertimeout_t);
        }).bind('mouseleave.jsp', function() {             // hide the scrollbar
            if (!instance.extPluginOpts.useTimeout)
                $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
            else {
                clearTimeout(instance.elementtimeout);
                if (!instance.isScrolling)
                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
            }         });         if (this.extPluginOpts.useTimeout) {             $el.bind('scrollstart.jsp', function() {                 // when scrolling show the scrollbar
                clearTimeout(instance.hovertimeout);
                instance.isScrolling = true;
                $vBar.stop(true, true).jspmouseenter();             }).bind('scrollstop.jsp', function() {                 // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                clearTimeout(instance.hovertimeout);
                instance.isScrolling = false;
                instance.hovertimeout = setTimeout(function() {
                    if (!instance.isScrollbarHover)
                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                }, instance.extPluginOpts.hovertimeout_t);             });             // wrap the scrollbar
            // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
            var $vBarWrapper = $('<div/>').css({
                position: 'absolute',
                left: $vBar.css('left'),
                top: $vBar.css('top'),
                right: $vBar.css('right'),
                bottom: $vBar.css('bottom'),
                width: $vBar.width(),
                height: $vBar.height()
            }).bind('mouseenter.jsp', function() {                 clearTimeout(instance.hovertimeout);
                clearTimeout(instance.elementtimeout);                 instance.isScrollbarHover = true;                 // show the scrollbar after 100 ms.
                // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                instance.elementtimeout = setTimeout(function() {
                    $vBar.stop(true, true).jspmouseenter();
                }, 100);             }).bind('mouseleave.jsp', function() {                 // hide the scrollbar after hovertimeout_t
                clearTimeout(instance.hovertimeout);
                instance.isScrollbarHover = false;
                instance.hovertimeout = setTimeout(function() {
                    // if scrolling at the moment don't hide it
                    if (!instance.isScrolling)
                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                }, instance.extPluginOpts.hovertimeout_t);             });             $vBar.wrap($vBarWrapper);         }     } },
jspapi = $el.data('jsp');
                    $.extend(true, jspapi, extensionPlugin);
                    jspapi.addHoverFunc();                });
            });
        };
    </script>

都说了 $(document).ready()、$(function() {}) 这些不会被触发，你即使放在 abc() 中也不会被触发，事件的执行是需要条件的，现在这个条件已经失效了，你还能指望事件代码会执行吗？

不是很明白你的意思
我在b.aspx body onload 执行了 function abc() ,在b.aspx 游览没问题
a.aspx 执行$("#changeCon").load("b.aspx", function() { abc(); }); 输出的画面出错
然后我把 b.aspx 的 css 先放进 a.aspx ，结果就可以了。
不是很明白实际运行原理...求解 ! 感谢您热心的帮助！为我解决了问题 ^.^

jq.load()可以加载动态界面。你要查看你预加载界面中的js执行顺序。你可以把你的css 写成动态加载。也就是用js动态添加到head节点下，。是可以的

调试易

jquery .load() 的问题

解决方案 »