从外部文件加载 DIV 标签答案

【问题标题】：Load DIV tag from external file从外部文件加载 DIV 标签
【发布时间】：2015-12-17 12:50:18
【问题描述】：

我试图通过在我的 NavBar 中选择链接时加载 DIV 标记来摆脱 FRAME 标记（用于加载“file1.html”target="ContentFrame"）。我现在将单个页面分为两个 DIV 标记。顶部的 DIV 标记是我的导航栏，它可以完美地将 html 文件加载到 FRAME 中，但现在我尝试加载 HTML 文件（在删除所有额外的 HTML 标记，如 HTML、HEAD、BODY 等之后......）到第二个 DIV 标签称为“内容”。我研究了 jQuery .Load，但似乎无法让它像我想要的那样工作。我现在正在考虑研究 PHP。我真的很愿意接受关于寻找什么的建议，或者任何可能做我想做的事情的示例来源。有什么想法吗？

<!-- NavBar -->
<a href="body1.html">Load body1.html into DIV ID Content</a>
<a href="body2.html">Load body2.html into DIV ID Content</a>

<div id="Content">
  Contents of body1.html would be here when page is first loaded.
  Then the contents here would be loaded from the file in the anchor
  tag when a link is selected. The bodyX.html files would have tags
  within them as well. Not just text.
</div>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
      $(function() {
        $("a").click(function(e) {
          e.preventDefault();
          $("#Content").load(this.href, function(data, textStatus, jqxhr) {console.log(data, textStatus, jqxhr.status)})
        })
        .filter("[href=http://www.gddas.com/newsite/home.html]").click()
      })
    </script>       
    <title>Index Page</title>
  </head>

  <body>
    <div class="header">
      <img src="images/logos/GDDASLogo.png" width="274" height="133" alt="GDDAS Logo" /><br>
      <ul class="flex">
        <li><a href="home.html">Home</a></li> <!-- This had the full path, but that didn't make a difference -->
        <li><a href="officers.html">Officers</a></li>
        <li><a href="announce.html"</a>
          <ul>
            <li><a href="events.html">Events</a></li>
            <li><a href="education.html">Continuing Ed</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="content">
    </div>
  </body>
</html>

【问题讨论】：

显示您尝试过的代码。 .load() 是您正在寻找的解决方案

标签： php jquery html css

【解决方案1】：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Include</title>
</head>
<body>
    <a href="#link1">Link1</a>
    <a href="#link2">Link2</a>
    <a href="#link3">Link3</a>
    <a href="#link4">Link4</a>


    <div id="include"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript"> 
        var includeDiv = $("#include");
        $(window).on('hashchange', function() {
            var href = location.hash.slice(1) +".html";
            includeDiv.load('include/' + href);
        });
    </script> 
</body>

【讨论】：

几乎完美！唯一缺少的部分是从包含 div 中加载的 home.html 开始。对此有什么想法吗？
为包含 div 中加载的 home.html 创建 CSS 样式
对不起，我不太明白。你是说我应该在 CSS 文件中添加一个标签，在第一次打开时加载 home.html 吗？如果是这样，那会是哪个标签？
还有其他人可以对此进行扩展吗？上面的代码运行良好，除了“home.html”应该在第一次加载页面时加载到“include”id 中，而不是。事实上，即使我在加载后点击“主页”链接，它也不会显示该页面。如果我单击任何其他正确加载的链接，然后单击主页将显示主页。任何帮助将不胜感激！'
您可以在 $(document).ready() 中使用相同类型的代码。例如：$(document).ready( function() { includeDiv.load('include/home.html'); });就在js脚本的最后。

【解决方案2】：

尝试在处理程序中使用 .click() 、 .preventDefault() 、 href 的点击 a 元素

$(function() {
  $("a").click(function(e) {
    e.preventDefault();
    $("#Content").load(this.href)
  })
  // load `body1.html` into `#Content` at page load
  .filter("[href^=body1]").click()
})

【讨论】：

Plus 1. 我认为他不需要.filter('...').click () 部分，但这仍然是“答案”
这看起来也不错。但是这个函数会在哪里定义呢？在正文中使用 SCRIPT 标签？
@user2021539 “但是这个函数应该在哪里定义呢？在正文中使用 SCRIPT 标签？” 是的。也可以在head 元素中尝试script 标签
似乎对我不起作用。我在标题部分添加了 SCRIPT 标记。至少 preventdefault 似乎有效。但是没有数据添加到 Content id。这只是 div id="content"
@user2021539 html 文件的内容是否为完整文档，例如 <!DOCTYPE html><html>..</html> 或 html 片段，例如 <div>..</div> ？

【解决方案3】：

切换到 .php 扩展名，如果您的主文件名为“index.php”，则使用两个 div 的内容创建另外两个文件（例如：div1.php 和 div2.php

根据上述情况，您的 index.php 应该类似于：

<html>
<head>
..... head here
</head>
<body>
<div id="div1">
<?php include('div1.php'); ?>
</div>
<div id="div2">
<?php include('div2.php'); ?>
</div>
<body>
</html>

非常基本且未经修饰的示例，但应该给您一个起点...

更新：

首先看看这个更新的小提琴：http://jsfiddle.net/vc2nq3us/3/

这当然行不通，因为我的小提琴中不包含 ajax。您可以将此代码用于您的项目，并且可以...

现在，还涉及一个文件 - 未显示在 jsfiddle 中。可能是这样的：

<?php

//protect the file from un-authorized access
define('AJAX_REQUEST', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
if(!AJAX_REQUEST) {die();}

if(isset($_POST["fileid"])){$fileid = $_POST["fileid"];}else{$fileid = ""; exit();} //if no fileid is set, kill the script

$file_contents = file_get_contents($fileid.".html"); //here we fetch the contents of file (for example: 1.html or 2.html and so on...)

echo htmlentities($file_contents); 

?>

希望这对你有用...T.

【讨论】：

看起来不错。除了如何根据单击的链接更改 div2 的内容？我会用一些伪代码更新我的 q。
这可以用 ajax 很好地完成，并且有不同的方法。我会为你准备一把小提琴并回复你
@user2021539 我准备了一个小提琴给你看。它包含三个变量，其中 div 2 有 3 种不同的可能内容（可通过按钮选择）。这些变量也可以是可以使用 ajax 获取的文件的内容。（在这种情况下，内容可以在您的 div 中更改，甚至无需刷新页面）...看看这个小提琴，如果您认为这对您来说是一个可能的解决方案，我可以向您发送完整的 ajax 代码 - 因为它不在在 jsfiddle 中允许：jsfiddle.net/vc2nq3us/1
此更新在页面加载后立即加载第一个变量的内容：jsfiddle.net/vc2nq3us/2
我认为这可能行得通。但是是从 html 文件还是从 var 中读取数据？因为实际页面有大约 30 个链接，每个链接的 html 文件都有格式化标签，并且有 s4everal 页面有 3 页以上的文本和 IMG 标签。

【解决方案4】：

不知道为什么 jquery.load 不适合你。发表您的努力可能会更有益。

这是关于它的文档，它应该可以工作： http://api.jquery.com/load/

下方：选择器是您要放置文件内容的位置。 .load() 中的参数是文件的路径。

$( "#Content" ).load( "file1.html" );

【讨论】：

我不认为 .load 对我有用，因为它位于部分，我需要根据正文部分中的锚点单击来更改内容。

【解决方案5】：

你错误地使用#Content 尝试使用#content 代替：

$(function() {
  $("a").click(function(e) {
    e.preventDefault();
    $("#content").load(this.href);
  })
  .filter("[href^=body1]").click();
});

【讨论】：