So führen Sie externe Seiten in HTML ein (Iframe-Tag-Methode)-HTML-Tutorial-php.cn

So führen Sie externe Seiten in HTML ein (Iframe-Tag-Methode)

yulia

Freigeben： 2018-09-25 16:29:32

Original

3793 Leute haben es durchsucht

Während des Seitenlayouts werden einige externe Seiten in HTML eingeführt. In diesem Artikel erfahren Sie, wie Sie die Iframe-Tag-Methode externer Seiten in HTML einführen. Freunde in Not können darauf verweisen, ich hoffe, es ist für Sie nützlich.

Am einfachsten ist die Verwendung von iframe, obwohl iframe weiterhin auf 0 gesetzt ist oder nein. Entfernen Sie die Ränder des Iframes. 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的节点.123

Nach dem Login kopieren

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 eine bestimmte Position genau zu finden. 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 a-Tag + Namensattribut

<a href = "#detail">详情</a> 
<a name = "detail"></a>12

Nach dem Login kopieren

Klicken Sie auf „Details“ und springen Sie zu

b. Verwenden Sie das id-Attribut des Tags

<a href = "#detail">详情</a>
<div id = "detail"></div>12

Nach dem Login kopieren

, um auf „Details“ zu klicken, um zur Position von

zu springen >

Der Ankerpunkt schlägt häufig fehl, wenn a+name verwendet wird. Daher wird empfohlen, die ID zum Binden des Ankerpunkts zu verwenden.

Um auf das Thema zurückzukommen: 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 durch HTML erreicht werden kann, aber es kann sein gemacht mit Hilfe von JS.

<!doctype html>
<html>
    <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>          
        <div><img src = "img/photo1.jpg" width="500px"/></div>      
        <iframe src="test1.html" height= "100px" name="leftFrame" scrolling="No"  noresize="noresize"  id="leftFrame"></iframe>
        <div><img src = "img/photo2.jpg"  width="500px"/></div>
        <div><img src = "img/photo3.jpg" width="500px" /></div>
        <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>

Nach dem Login kopieren

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.

Suchen Sie auf der Iframe-Seite den übergeordneten HTML-Code über „Parent“, und Sie können den HTML-Code der obersten Ebene über „top“ finden.

Wenn Sie zwischen Iframes auf derselben Ebene aufrufen, müssen Sie den suchen Zuerst das übergeordnete HTML und dann den iframe suchen. Die Schlüsselfunktion ist das nach der Verbindungsadresse hinzugefügte Detail (Detail ist nur eine allgemeine Referenz). 8080/index.html. Dann sollte die URL nach dem Ankerpunkt lauten: localhost:8080/index.html#detail

Am Ende der URL-Adresse befindet sich ein „#“-Bezeichner, der darauf hinweist, dass sie benötigt wird um zur entsprechenden Stelle zu springen. #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, springt zum Anfang). ist Zurück nach oben.

Das obige ist der detaillierte Inhalt vonSo führen Sie externe Seiten in HTML ein (Iframe-Tag-Methode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!