logo标签列表

如何在页面加载时将HTML插入到div中？

javascriptjqueryhtmljquery-mobile
5

我花了很长时间在SO上寻找一个好的答案来回答我的问题，但没有一个完全符合要求...所以我来试试。我正在使用jquery、javascript、html和jquery-mobile创建一本电子书。每个内容页都有一个可访问的侧边栏，其中包含目录。目录是一组嵌套的li和ul元素，其中包含在每个页面上重复使用的html。如果您熟悉jquery mobile，我会将此列表层次结构插入到<div data-role=panel>部分中，以在侧边栏中创建可折叠的列表元素。现在，我正在通过在每个页面上放置完全相同的目录代码来实现这一点。显然，这是一种可怕的方式。我需要找到一种方法将此目录代码嵌入到每个需要它的页面中，这样当更改时只需更新一次目录，而不是在每个页面上都更新它。现在我是这样做的...

<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 mobile、jquery或我创建的任何外部JavaScript文件。我试图理解为什么。我在中加载所有资源，目录加载在中。所以，你会认为这应该可以工作……但是，我唯一能使幻灯片面板正常工作的方法是将head部分复制到目录文件中。抱歉解释有点冗长......但以下代码可以澄清。 
<!doctype html> <html>
<head>
    <title class="link-1-1-1-2" <!--id="link-1-1-1-2"--> >Part 2</title> 
    <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"></link>

        <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>


</head>
<body>
    <div data-role="page">



        <!--begin header-->
        <div data-role="header" data-position="fixed">
            <a data-icon="grid" href="#TOC">Table of Contents</a>
            <h1>Part 2</h1>
            <button data-icon="check" id="bookmarkPage"> Bookmark </button>
        </div><!-- /header -->

        <!--begin content-->
        <div data-role="content">
            <p> The content of the page would go here </p>
        </div><!-- /content -->


        <!--begin footer-->
        <div data-role="footer" data-id="navigation-bottom" data-position="fixed" class="ui-bar">
            <div data-role="controlgroup" data-type="horizontal">               
                <button data-icon="back" data-theme="a" id="previous"> Previous</button>    
                <button data-icon="forward" data-theme="a" id="next"> Next</button>
            </div>
        </div><!--footer-->


        <!--Create a slide panel with the table of contents-->
        <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-->

    </div><!-- /page -->

</body>
 </html>

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

 <!--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>
3
应该使用服务器端的代码。 - SLaks
或者，如果您在获取的HTML上没有任何操作，您可以将其复制到DOM中，而无需HTML文件，否则您必须访问此内容的主机并设置一些标志。这里有一个不错的阅读材料：http://www.jquery4u.com/dom-modification/jquery-change-css-iframe-content/ - Arthur Kovacs
你能详细说明一下“已加载的HTML没有访问jQuery等内容”是什么意思吗？HTML中是否有JavaScript代码，或者您正在使用jQuery的操作/事件，但与HTML的交互未被激活？ - BrianH
当然。我会把它放在jsfiddle上，但我不确定如何使用外部js文件。但基本上，目录面板应该具有适当的jquery mobile格式以及一些按钮控件，这些按钮可以同时展开所有列表元素，折叠所有列表元素或打开书签。按钮在bookmark2.js和linknavigation.js中定义，example.toc.html文件仅按其ID调用每个按钮。当我打开面板时，按钮无效，并且面板显示为纯HTML，而不是像jquery-mobile通常那样进行格式化。 - ordanj
1
如果我理解你的问题正确，你需要使用 pagebeforeshow 或 pageshow 事件来加载内容，然后你应该使用 .trigger('pagecreate') 来增强面板的标记。在 JQM 中永远不要使用 .ready()，忽略下面的答案，它们应该被投票否决。 - Omar
显示剩余6条评论
2个回答
1
我不是100%确定，但我看到两个选项：
1）将所有必要的标签从原始文档复制到TOC.html文件中。
2）尝试将$.load包装到$(document).ready / $(window).load中，然后查看发生了什么。我想把这个放在常规评论中，但不幸的是我还不能评论（需要50个声望）。
我之前尝试过选项2，但我会再试一次，看看是否有帮助。 - ordanj
0

如果你真的想要在服务器端完成这个任务，那么你可以将你的加载代码包装在 $(function(){ ...code here... }); 中吗？

看起来你可以使用这种方法和 load 的 complete callback function。流程大致如下：

  1. 使用 .ready() 等待页面加载完成
  2. 触发 load()
  3. 在 complete() 回调中，将数据附加到页面上，并将任何可能需要的 jquery 移动数据属性应用于页面。

如果你为此创建一个 plunkr，我们可以做一个工作示例。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接