部分渲染HTML / JavaScript

前端之家收集整理的这篇文章主要介绍了部分渲染HTML / JavaScript前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试着澄清我想做什么我有一些 HTML文件,其中每一个,我想部分地渲染另一个HTML文件,例如header.html和footer.html以观察DRY概念.

HTML文件应如下所示:

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

我怎样才能做到这一点?

解决方法

Here’s a link(第一个来自Google我可能会添加),它解释了如何用各种语言进行此操作.

另请注意,某些IDE会为您处理此事. Dreamweaver是一个例子;在ASP.NET中有master页面;等等.

PHP

<?PHP
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

ASP:

<!--#include file="path to file/include-file.html"-->

JS:

JavaScript is another way to include HTML within the pages of your
site. This has the advantage of not requiring server-level
programming. But it’s a little more complicated than the server-level
include methods.

  1. Save the HTML for the common elements of your site to a JavaScript
    file. Any HTML written in this file,must be printed to the screen
    with the document.write function.

  2. Use a script tag to include the
    JavaScript file on your pages.
    <script type=”text/javascript” src=”path to file/include-file.js”>

  3. Use that same code on
    every page that you want to include the file.

请注意,JS版本不是理想的.
JS可能在浏览器中被禁用或不可用.
2.该页面不会一次呈现/加载.

另外,我不认为这个DRY真的很重要.考虑使用将为您创建页面模板的IDE(例如Dreamweaver).

如果你有勇气(有点老式),而且您不能使用上述任何一种,请考虑为您的内容使用iframe:

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

免责声明我宁愿切断我自己的手,而不是执行iframe或JS方法.深入考虑您是否真的需要这样做.

原文链接:https://www.f2er.com/html/230315.html

猜你在找的HTML相关文章