Question

我想用jQuery将外部.html加载到div中。

这是代码：

$(document).ready(function() {

    $('#wrap').load('elements/main.html', function() {
        alert('Loaded!');
    });
});

它提醒我加载但我的html内容没有出现。有时它适用于Firefox，但不适用于任何其他浏览器。

html：

    <html>
<head>
    <title>Mypage</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
    <script type='text/javascript' src='js/script.js'></script>
    <link href='css/css.css' type='text/css' rel='stylesheet' media='screen'>
</head>
<body>
    <div id='background'>        
        <div id='header'>
        </div>
        <div id='navbar'>
            <ul id='list'>
                <li><a href='main'>FŐOLDAL</a></li>
                <li><a href='about'>MAGAMRÓL</a></li>
                <li><a href='idea'>GONDOLATOK</a></li>
                <li><a href='ref'>REFERENCIÁK</a></li>
                <li><a href='contacts'>ELÉRHETŐSÉGEK</a></li>
            </ul>
        </div>
        <div id='wrap'></div>
    </div>
</body>
</html>

CSS：

* {margin: 0; padding: 0;}

#background {
    position: fixed;
    height: 100%;
    width: 100%;
    /*background-image: url(../images/background/bg_main.jpg);
    background-size: cover;*/
    overflow-y: scroll;
}
#header {
    position: fixed;
    width: 100%;
    height: 20%;
    border-bottom: gold solid 2px;
    overflow: hidden;
    z-index: 10;
}
#navbar {
    background-color: rgb(232,230,158);
    background-size: cover;
    position: fixed;
    width: 750px;
    height: 40px;
    top: 20%;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 7;
    border-image: url(../images/borders/shadow.png);
    border-image-slice: 0 0 100% 0;
    border-image-width: 0px 0px 64px 0px;
    border-image-outset: 0px 0px 60px 0px;
    border-image-repeat: stretch stretch;
}
#list {
    margin: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: -o-fit-content;
    width: fit-content;
}
    #list li {
        font-size: 15px;
        list-style-type: none;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 0 10px;
        top: 20px;
        transform: -webkit-translateY(-50%);
        transform: -moz-translateY(-50%);
        transform: -o-translateY(-50%);
        transform: translateY(-50%);
        font-family: 'Lora', serif;
    }
    #list li a {
        color:#36393D;
        text-decoration: none;
    }
    #list li a:hover {
        color: #AC7315;
    }
    #list li a:active {
        color: #AC7315;
    }
#wrap {
    position: fixed;
    width: 950px;
    height: 80%;
    top: 20%;
    background-image: url(../images/background/content.png);
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
}

非常感谢您的帮助！

Answer 1

此代码：

  $('#wrap').load('elements/main.html', function() {
            alert('Loaded!');
        });

永远alert('Loaded!')

检查load()的状态如下：

$(document).ready(function() {

    $('#wrap').load('elements/main.html', function(responseText, textStatus, XMLHttpRequest){
     if (textStatus == "success") {
     alert(1);
         console.log(responseText);
    }
    if (textStatus == "error") {
    alert(0);
         console.log(responseText);
    }
    });
});

如何使用jQuery加载外部html

1 个答案: