-2

我需要在 div 中加载外部内容。我找到了一个代码来做到这一点，但我的脚本不再工作了。有人可以帮忙吗？我是这种工作的新手。

谢谢

function ajaxFunction(id, url){
    var xmlHttp;
    try {// Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();     
    } catch (e) {// Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange = function(){
        if (xmlHttp.readyState == 4) {
            //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
            var respText = xmlHttp.responseText.split('<body>');
            elem.innerHTML = respText[1].split('</body>')[0];
        }
    }

    var elem = document.getElementById(id);
    if (!elem) {
        alert('The element with the passed ID doesn\'t exists in your page');
        return;
    }

    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);

}

编辑 - 这是我的 HTML 代码。这是我打电话给我的ajax。

<div id="right" class="anim">
    <div class="exit">
    <a class="btnclose"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
    <div class="portfolio-box" id="git-box"></div>
    </div>
<div class="container">
        <div id="centerContainer" class="col-lg-12">
            <div id="grid">

                <div class="box" data-category="Branding" data-move="right">                    
                    <div class="hide" data-thumbnail="images/portfolio/branding/git.jpg"> </div>
                    <a type="link" value="Call Project" id="project-link" onclick="ajaxFunction('git-box','portfolio/git.html')">
                    <div class="thumbnail-caption">
                        <h3>Groupe<br> intégration<br> Travail</h3>
                        <h5>Branding</h5>
                    </div></a>
                </div>

编辑 - 这是必须在 AJAX 插入的 div 中激活的代码 

(function () {
    var $frame = $('#centered');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'centered',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 1,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });

    $(window).resize(function(e) {

    $frame.sly('reload');
    });

}());

});
4

1 回答 1

2

将要应用于 ajax 加载内容的整个 js 放在一个函数中：

function loadSly() {
    var $frame = $('#centered');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'centered',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 1,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });

    $(window).resize(function(e) {
        $frame.sly('reload');
    });
}

然后在 html insert 之后执行它：

xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4) {
        //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
        var respText = xmlHttp.responseText.split('<body>');
        elem.innerHTML = respText[1].split('</body>')[0];
        // here you apply the javascript code to the html loaded
        loadSly();
    }
}
于 2013-09-17T15:20:48.633 回答