jQuery.load 加载 HTML 文件 [英] jQuery.load to load HTML file

查看：33
本文介绍了jQuery.load 加载 HTML 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在此之前我从未使用过jQuery，但我会解释我想要做什么.

index.html

<头><title>我很棒的网站</title><link href="style.css" rel="stylesheet" type="text/css"/><link rel="快捷图标" href="/favicon.ico"/><script src="http://code.jquery.com/jquery-1.9.1.js"></script><身体><!-- <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe>我曾经使用过这个 - 但我不能有下拉菜单.--><!-- 这是我的问题--><脚本>$('#navbar').load('./navbar.html');<noscript><h1>请启用Javascript！</h1></noscript><div id="容器"><!-- 内容在这里-->

navbar.html

所以我在这里尝试做的是有许多 HTML 页面，它们都链接到一个导航栏 html 页面，所以当我更改 navbar.html 时，我不必更改每个页面.

我已经有另一个问题这里.Davor Milnaric 建议如果您使用的是 jquery，您可以尝试使用 '.load()' 函数.api.jquery.com/load"，但我无法让它工作.我究竟做错了什么?我如何解决它?任何帮助将不胜感激.

解决方案

你需要做两件事:

  1. 使用 $(document).ready() - 阅读这里；所有 jQuery 代码都必须这样包装:

    $(document).ready(function(){//jquery 代码放在这里....});

  2. 改变

    $('#navbar').load('./navbar.html');

到

$('#container').load('./navbar.html');

.. 你没有 id="navbar" 的元素并根据 this:

<块引用>

如果没有与选择器匹配的元素——在这种情况下，如果文档不包含带有 id="result" 的元素(在我们的例子中是navbar")——Ajax 请求将不发送.

I've never used jQuery before this, but I'll explain what I'm trying to do.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Awesome Website</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>

<!--    <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
            <!-- This is my problem -->
        <script>
                $('#navbar').load('./navbar.html');
        </script>
        <noscript>
            <h1>Please enable Javascript!</h1>
        </noscript>

        <div id="container">
                <!-- Content Here -->
        </div>

    </body>
</html>

navbar.html

<div id="navbar">
        <li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
        <li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>

So what I'm trying to do here, is have many HTML pages which all link to one navbar html page, so when I change the navbar.html, I dont have to change every page.

I already have another question here. Davor Milnaric suggested "if you are using jquery, you can try with '.load()' function. api.jquery.com/load" but I can't get it to work. What am I doing wrong? How do I fix it? Any help would be much appreciated.

解决方案

You need to do 2 things:

  1. Use $(document).ready() - read here; All jQuery code must be wrapped like this:

    $(document).ready(function(){

    //jquery code goes here....        

});

  2. Change

    $('#navbar').load('./navbar.html');

to

$('#container').load('./navbar.html');

.. you don't have an element with id="navbar" and according to this:

If no element is matched by the selector — in this case, if the document does not contain an element with id="result" (in our case "navbar") — the Ajax request will not be sent.

这篇关于jQuery.load 加载 HTML 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆