文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在页面加载时将HTML插入div？

问如何在页面加载时将HTML插入div？
EN

Stack Overflow用户
提问于 2013-08-26 19:44:27
回答 2查看 2.1K关注 0票数 5

我花了很长一段时间来寻找我的问题的好答案，但是没有什么能击中mark...so。我正在使用jquery、javascript、html和jquery-mobile来创建类似的电子书。每个内容页上的幻灯片面板上都有一个可访问的目录。目录是一组嵌套的li和ul元素，包含在每个页面上反复使用的html。如果您熟悉jquery，我将在<div data-role=panel>部分插入这个列表层次结构，以便在幻灯片面板中创建可折叠的列表元素。现在，我这样做的方法是在每个页面上放置完全相同的目录代码。显然，这是一种很糟糕的方法。我需要找到一种方法将这个内容表代码嵌入到每一个需要它的页面中，这样我就只能在更改时更新一次目录，而不是在每个页面上更新它。现在我就这样做..。

代码语言：javascript
复制
<div data-role="panel" id="TOC" data-icon="grid" data-display="overlay">
                <script>
                    $('#TOC').load('example.TOC.html')
                </script> 

            </div> <!--This is the end of the slide panel section-->

html正在加载，但它无法访问jquery、jquery或我创建的任何外部javascript文件。我想弄明白为什么。我正在加载<head>中的所有资源，目录正在<body>中加载。所以，你会认为这会奏效.但是，要使幻灯片面板正常工作，唯一的方法是将头部分复制到目录文件中。抱歉，explanation...but太长了，这里有一些代码需要澄清。

更新:我正在为example.toc.html添加代码，这样你们就可以看到正在发生的一切了。

代码语言：javascript
复制
 <!--These first lines are required to get the table of contents working, but cause other 
issues-->  
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="../Support/js/jStorage.js"></script>
    <script src="../Support/js/bookmark2.js"></script>
    <script src="../Support/js/linknavigation.js"></script>-->


    <!--create a navbar for the top-->
    <div data-role="controlgroup" data-type="horizontal" data-mini="true"> 
        <button data-icon="plus" data-theme="a" id="openAll">Expand All</button>
        <button data-icon="minus" data-theme="a"id="closeAll">Collapse All</button>
    </div><!-- /navbar -->



    <!--Give the panel some control buttons from out linknavigation.js file-->
    <!--Give the panel some control buttons from out linknavigation.js file-->
    <div data-role="controlgroup" >
        <button data-icon="plus"    data-mini="true"  data-theme="a" id="openSome"> Expand Some</button>    
        <button data-icon="minus"   data-mini="true"  data-theme="a" id="closeSome"> Collapse Some</button>
        <button data-icon="arrow-d" data-mini="true"  data-theme="a" id="expandBookmarks">View Bookmarks</button>
        <button data-icon="delete"  data-mini="true"  data-theme="a" id="clearBookmarks"> Clear Bookmarks </button>
    </div>


<!--Create list structure....this is not an ideal solution...need a way to reference this structure externally-->
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 1</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <!--<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>-->
            <a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-1" rel="external" href='example.chapter1-unit1-section1-part1.html'>Part 1</a>
            <a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-2" rel="external" href='example.chapter1-unit1-section1-part2.html'>Part 2</a>
            <li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div>

<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 2</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div> 
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 3</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div> 
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 4</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
javascript
jquery
html
jquery-mobile
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-08-26 19:51:26

我不是百分之百肯定，但我看到两个选择：

1)将所有必要的标记从原始文档复制到TOC.html文件

2)尝试将$.load包装到$(.ready/ $(window).load中，看看会发生什么。我会在一个定期的评论，但不幸的是，我不能评论(需要50个代表)。

票数 1
EN

Stack Overflow用户

发布于 2013-08-26 19:57:37

如果你真的打算做所有的服务器端，那么你能不能把你的加载代码封装在$( ...code ){这里.)；？

看起来，您可以将其与load的完全回调函数结合使用。流程会是这样的：

  1. 等待使用.ready()加载页面
  2. 放火负荷()
  3. 在complete()回调中，将数据追加到页面，将可能需要的任何jquery移动数据属性应用到页面。

如果您为此创建了一个柱塞，我们可以做一个工作示例。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/18451825

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档