Question

- 为了清晰起见 -

我有一个带有DIV的索引页面，当访问者点击链接时，其他主要内容（html文件）被加载（客户端）（通过AJAX，jquery load（），请参阅下面的代码）

我想在最初加载的页面上（即在body-tag中）添加一个随机的背景图像，但只要一些（其他）内容被加载到＆＃34; ajax＆＃34; DIV，这个背景图像应该从index.html的主体中消失。

我想写一个if-else条件，确保该内容与＃34; ajax＆＃34; DIV仍未改变。我发现window.location.href无法检查网站的状态，因为生成的网址始终相同，与加载的AJAX内容无关。

现在，有没有办法写出类似的条件：

- 如果原始DIV内容被交换，=＆gt;背景：＆＃39; ＆＃39;

或

- 如果DIV内容有/没有ID ...，=＆gt;背景：＆＃39; ＆＃39;

我希望能够理解我的问题。

编辑：我添加了一些我希望有所帮助澄清的内容：简化的我的网站（index.html）看起来像这样：

<head>  
</head>
<body>
    <a class="ajaxLink" href="othercontent.html">next</a>

        <div id="content-main">
            <div id="othercontent"></div> //<== this is content from other html-file
        </div>
</body>

用户点击链接，然后使用jquery load（），将一些html文件内容加载到div（#content-main）中，最后一切都只发生在这个单一的index.html中。因此，如果我将背景图像分配给index.html的主体（使用jquery $（＆＃39; body＆＃39;）。css ...），我需要找到一种方法来识别何时非-initial内容存在/加载在DIV＃content-main ..

中

EDIT2 ：我现在将这里提到的jQuery代码粘贴，因为它应该有助于理解为什么答案中的某些建议不起作用（不要混淆，代码包含新内容的ajax load（）和许多行对于HTML5历史记录功能）：

$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support

    /*unnecessary? I don't use the next 3 lines of code
    //To override the default action for the link(anchor tag), use the following jQuery code snippet.
    $("a.ajaxLink").on('click', function (e) {
        //code for the link action
        return false;
    });
    */

    //Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
    $("a.ajaxLink").on('click', function (e) {
        e.preventDefault();
        /*
        - if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
        - if commented, html5 nonsupported browers will reload the page to the specified link.
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div #content-main
        $('#content-main').load(pageurl+'?rel=tab'+'#content-main');

        //to change the browser URL to the given link location
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;
    });

    //the below code is to override back button to get the ajax content without page reload
    //added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state !== null) {
            $('#content-main').load(location.pathname+'?rel=tab'+'#content-main');
        }
        else {
            $('body').load(location.pathname+'?rel=tab'+'#content-main');
        }
    });
});

Answer 1

关注夏威夷的帖子

$(document).ready(function() {
  $("body").css("backgroundImage", "url(backgroundImageUrl)");
  $.ajax().done(function() {
    return $("body").css("backgroundImage", "");
  });
});

修改

*编辑：我添加了一些我希望有所帮助澄清的内容：我的网站（index.html），简单地说，看起来像这样：
                        下
        <div id="content-main">
            <div id="othercontent"></div> //<== this is content from other html-file
        </div>
</body> The User clicks on the link, and then ,using jquery load(), some html-file content gets loaded into the div
（＃content-main），最后一切都只发生在这个单一的   index.html的。所以，如果我将背景img分配给   index.html（使用jquery $（＆＃39; body＆＃39;）。css ...），我需要找到一种方法   识别DIV＃content-main中的其他内容。*
     嗯，这不起作用。当我点击我页面上的链接时，DIV   得到了新内容，但由于我还在index.html上，所以   身体背景不会改变。 - JWatan

.ready()出现了火灾＆＃34;一次＆＃34;。见http://api.jquery.com/ready/

原帖，第1段

仅适用于最初加载页面（即在正文标记中），但是很快因为一些（其他）内容被加载到＃34; ajax＆＃34; DIV，这个背景应该从index.html消失。 - JWatan

body的css backgroundImage属性只能被称为＆＃34;一次＆＃34;。如问题的第1段所述，整个页面似乎不会重新加载＆＃34;，只有descendant个body元素，即div。

检查动态填充的if（div descendant）的内容不一定需要body语句。它可以包含，但不一定是满足body元素backgroundImage添加或删除的要求所必需的。

上述内容应符合原始要求，不包括进一步的测试

jsfiddle http://jsfiddle.net/guest271314/t6ZYf/

如果要求不包括加载backgroundImage一次，请澄清一下吗？很高兴能提供帮助，如果能够的话

请注意

应在完成.done()请求后调用$.ajax() http://api.jquery.com/deferred.done/。

修改（已更新以反映原始问题修订https://stackoverflow.com/posts/22673564/revisions）

$(function () { /* `document` `ready` */
  $("body").css("backgroundImage", "url(backgroundImageUrl)"); /* set css`backgroundImage` property for `body` "once", at `document` `ready`, "initial page load", please see jquery `.ready()` api.jquery.com/ready */
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support

    /*unnecessary? I don't use the next 3 lines of code
    //To override the default action for the link(anchor tag), use the following jQuery code snippet.
    $("a.ajaxLink").on('click', function (e) {
        //code for the link action
        return false;
    });
    */

    //Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
    $("a.ajaxLink").on('click', function (e) {
        e.preventDefault();
        /*
        - if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
        - if commented, html5 nonsupported browers will reload the page to the specified link.
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div #content-main
        $('#content-main').load(pageurl+'?rel=tab'+'#content-main', function() {
        return $("body").css("backgroundImage", ""); /* jquery `.load()` `complete` `callback`, remove `backgroundImage` from `body` */
        });

        //to change the browser URL to the given link location
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;
    });

    //the below code is to override back button to get the ajax content without page reload
    //added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state !== null) {
            $('#content-main').load(location.pathname+'?rel=tab'+'#content-main', function() {
        return ($("body").css("backgroundImage") != "" ? $("body").css("backgroundImage", "") : null); /* jquery `.load()` `complete` `callback`, `if` `backgroundImage` not empty string, remove `backgroundImage`, `else` return `null` */
        })
        }
        else { /* not certain here, if needed to achieve requirement, Try place `load()` `callback` at `if` statement above at `load()` `callback` here, as well */
            $('body').load(location.pathname+'?rel=tab'+'#content-main');
        }
    });
});

注意请参阅jquery .load() complete callback http://api.jquery.com/load/

希望这有帮助

仅在第一页上显示背景图像

1 个答案: