这个想法是,如果我有两个 HTML 页面,我可以加入它们,我可以调用它们的方法和两个页面之间的 DOM,而无需使用像PHP
例子:
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script>
function FuncionPagina1(){
return "mundo";
}
</script>
</head>
<body>
<h1 id="mundo" class="mundoClass">MUNDO!!!</h1>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<script>
function FuncionPagina1(){
return "hola";
}
</script>
</head>
<body>
<h1 id="hola" class="holaClass">Hola</h1>
</body>
</html>
如何加入page1和page2并能够像在同一页面上一样通过简单的访问调用它们?可以调用你自己的and id="mundo"
,如果可能的话甚至调用你的 JavaScript 函数。class="mundoClass"
id
class
注意:应该注意的是,这个想法是没有iframe
load
使用jQuery是完全可能的,您只需要注意不要将第 1页包含在第 2 页中,而第 2 页又包含第 1 页,这将是一个无限循环,我真的不知道它的行为如何。最后,回到主题:您甚至可以更具体地定义要加载页面的哪个部分:
并为文档加载完成时定义一些操作:
在 HTML 中,您可以使用
link
和导入文件。您可能已经将它与 CSS 文件一起使用以向页面添加样式,但您也可以使用它来导入其他 HTML 页面。此方法将允许您直接使用其他页面的 JS 函数(
script
它们在执行的那一刻执行import
),并且要访问导入页面的变量,您将需要几行(将导入的页面移动到变量,在该变量中而不是在 DOM 本身中查找元素)。没什么复杂的。因此,要将一个页面导入另一个页面,您只需执行以下操作:
如果导入的页面有JS函数,可以直接调用,读取变量如下:
需要注意的重要一点:
import
可能并非所有浏览器都支持,并且受 CORS 规则的约束,即它们必须具有相同的来源或允许从其他来源的每个页面导入页面。这是一个例子:
page1.html
page2.html
不要把所有的文字都贴上去,因为有些标签每页只需要使用一次,而是把内容分成几部分。
首先是在要获取外部资源的页面上使用Fetch API ,在本例中为 HTML 页面。
尽管上述是可能的,但我不认为这是“普遍的良好做法”。至于函数,在某些情况下最好将它们放在一个文件中,即创建一个库,并在需要它包含的函数的每个页面上加载它。
关于 HTML 标签,在某些情况下,理想的做法是将结构放在页面中,并通过类和/或 JavaScript 管理逻辑,即控制何时显示它们。
参考书目