Heim > Artikel > Web-Frontend > So führen Sie externe Seiten in HTML ein
So führen Sie externe Seiten in HTML ein
- 小云云Original
- 2018-03-29 16:31:093156Durchsuche
Normalerweise sind Kopf, Fuß und RightBar (Einträge auf der rechten Seite) einer Website identisch. Andernfalls können zehn, zwanzig oder sogar mehr Änderungen vorgenommen werden erforderlich sein wird, ist eine mühsame, aber sinnlose Aufgabe. Mit Hilfe von PHP oder JSP kann dieses Problem mithilfe von include leicht gelöst werden. Wenn wir uns jedoch von der Back-End-Sprache lösen, kann dieses Problem dann aus der Front-End-Perspektive gelöst werden?
1. Mit Hilfe von iframe
Am einfachsten ist die Verwendung von iframe. Obwohl HTML5 den Frame abgeschafft hat, können wir ihn beibehalten Verwenden Sie weiterhin iframe. Es gibt ein Frameboder-Attribut. Setzen Sie den Attributwert auf 0 oder nein, um den iframe-Rahmen zu entfernen. Stellen Sie dann das Scrollen auf Nein ein. Dies ist durchaus machbar, aber denken Sie daran, es in einer Serverumgebung auszuführen.
var frame = document.getElementsByTageName("iframe")[0];
frame.contentWindow.document.XXX方法,
如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.Da ich bisher keine Erfahrung mit der Verwendung von iframe zum Einführen des Headers habe, sollte dieser neben dem Springen normalerweise auch eine andere Funktion haben. Wenn die Seite lang ist, klicken Sie, um sie genau zu positionieren. irgendwohin. Der Seitensprung hat keine Auswirkung, wenn er mit iframe eingeführt wird, aber was ist mit dem Ankerpunkt? Um es herauszufinden, müssen Sie es ausprobieren.
Fügen Sie hier einige Kenntnisse über Ankerpunkte hinzu:
Ankerpunkte können zur entsprechenden Position der aktuellen Seite und auch zur entsprechenden Position anderer Seiten springen.
Es gibt zwei Möglichkeiten, Ankerpunkte zu implementieren: Eine ist ein Tag + Namensattribut und die andere besteht darin, das Id-Attribut des Tags zu verwenden.
Die Details lauten wie folgt:
a. Verwenden Sie das Attribut a tag + name
<a href = "#detail">详情</a>
<a name = "detail"></a>Klicken Sie auf „Details“, um zum Speicherort von 5e8304ee35d55ad9c18145a21a3f6a74 zu springen.
b. Verwenden Sie das ID-Attribut des Tags
<a href = "#detail">详情</a>
<p id = "detail"></p>, um auf „Details“ zu klicken, um zum Speicherort von d1a8716bbca693382eab805d6bb06c9f
Können wir nach der Einführung von iframe die entsprechende Position finden, indem wir auf das Element im iframe klicken? Hier verwenden wir iframe, um head.html einzuführen, was auch mein ursprünglicher Zweck ist.
Was wir also erreichen wollen, ist: Klicken Sie auf das a-Tag des Iframes und suchen Sie die entsprechende Position des Haupt-HTML. Durch die Implementierung haben wir festgestellt, dass dies nicht einfach über HTML erreicht werden kann, sondern über das Hilfe von JS.
<!doctype html><html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<style>
#leftFrame{display:block;}
</style>
</head>
<body>
<p><img src = "img/photo1.jpg" width="500px"/></p>
<iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"></iframe>
<p><img src = "img/photo2.jpg" width="500px"/></p>
<p><img src = "img/photo3.jpg" width="500px" /></p>
<p id = "buttom">detail</p>
</body></html><script>
window.onload = function(){
var iframe = document.querySelector("#leftFrame"); var bot = iframe.contentWindow.document.querySelector("#bot"); var top = iframe.contentWindow.document.querySelector("#top");
bot.onclick = function(){
document.body.scrollTop = document.body.offsetHeight;
};
top.onclick = function(){
document.body.scrollTop = 0;
};
};</script>Es gibt Elemente mit den IDs bot und top im Iframe. Die Positionierung wird durch JS erreicht. Auf der Hauptseite kann das Dokument im Iframe über iframe.contentWindow als HTML-Objekt zurückgegeben werden, und das zurückgegebene Objekt kann über alle Standard-DOM-Methoden verarbeitet werden.
Auf der Iframe-Seite können Sie „parent“ verwenden, um den übergeordneten HTML-Code zu finden, und Sie können „top“ verwenden, um den obersten HTML-Code zu finden.
Wenn Sie zwischen Iframes auf derselben Ebene aufrufen, müssen Sie den übergeordneten HTML-Code suchen Suchen Sie zuerst nach dem Iframe. Seine Schlüsselfunktion ist das nach der Verbindungsadresse hinzugefügte Detail (Detail bezieht sich nur darauf, wenn die aktuelle URL localhost:8080/ ist). index.html, dann sollte die URL nach dem Ankerpunkt localhost lauten: 8080/index.html#detail
Die URL-Adresse hat am Ende eine „#“-Kennung, die angibt, dass zur entsprechenden Stelle gesprungen werden muss. #idName, der Browser findet ein Tag, das den Eigenschaften von „#idName“ auf der Seite entspricht. Wenn das Zeichen nach „#“ in der URL nicht im Text gefunden werden kann und es sich um die aktuelle Seite handelt, wird nicht gesprungen. Wenn von einer anderen Seite gesprungen wird, wird der obere Rand der Seite angezeigt.
Zurück zum Anfang der Seite gehen, zusätzlich zum Festlegen des scrollTop des Körpers über JS (0 kehrt zum Anfang zurück, setzt ihn auf die Höhe des Körpers und springt zum Anfang), ist afeaa91bd55797efd28520d87cc51f8c回到顶部5db79b134e9f6b82c0b36e0489ee08ed2. Mit Hilfe von Ajax (JQuery-Lademethode)
Eine andere Möglichkeit besteht darin, die Seite mit Hilfe der JQuery-Lademethode zu laden.
load(URL, Daten, Rückruf); URL ist die URL der zu ladenden HTML-Webseite; Daten: Schlüssel/Wert, der an den Server gesendet wird; Rückruffunktion, wenn das Laden erfolgreich ist. $(function(){
$("selector1").load("page1.html");
$("selector2").load("page2.html");
$("selector3").load("page3.html");
});3、使用HTML imports
HTML imports提供了一种在一个HTML文档中包含和重用另一个HTML文档的方法。目前谷歌已经全面支持HTML imports，Opera35版本之后支持，但是FF依旧不支持。(在谷歌的地址栏输入:chrome://flags,启动或禁止一些功能)
尽管目前HTML imports的兼容不是很好，但是我们还是有必要了解其使用方法，W3C已经发布了HTML imports的标准草案，相信后期应该还是会用得比较普遍的。使用HTML imports
<!doctype html><html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<link rel = "import" href = "test1.html"/>
</head>
<body>
<p id = "content"></p>
</body></html><script>
var post = document.querySelector("link[rel = 'import']").import; var con = post.querySelector("p");
document.querySelector("#content").appendChild(con.cloneNode(true)); var clone = document.importNode(con,true)
document.querySelector("#content").appendChild(clone)</script>给出了两种将import进来的html中我们需要的部分插入到当前html.
最后简单介绍document.querySelector和document.querySelectorAll，这两个方法是HTML5在Web API中新引入的方法，大大简化了在原生Javascript代码中选取元素。
document.querySelector和document.querySelectorAll都是接收一个字符串作为参数，这个参数需要符合CSS选择语法，即:标签、类选择器、ID选择器，属性选择器(E[type=”XX”]),结构选择器(:nth-child(n))等。不支持伪类选择器。
document.importNode(node,deep)方法把一个节点从另一个文档复制到该文档以便应用，第二个值为true，那么将该节点的所有子孙节点也复制过来。
node.cloneNode(deep):对已有的节点进行克隆,deep值为true，表示克隆其子孙节点。如果deep为false，则只克隆该节点自身。
除了以上方法外，目前更为主流的一种方式是使用组件化开发。每一部分作为一个组件。
Das obige ist der detaillierte Inhalt vonSo führen Sie externe Seiten in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!