Shulou(Shulou.com)06/02 Report--

This article mainly analyzes the relevant knowledge of what is the method of introducing external pages into Html, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor to have a look, and follow the editor to learn more about "what is the way to introduce external pages into Html".

With the help of iframe

First of all, the easiest thing to think of is to use iframe. Although html5 abolishes frame, it still retains iframe, and we can still use it. Iframe has a frameboder property that sets the property value to 0 or no, removing the iframe border. Then set scrolling to no. This is completely feasible, but remember to run it in a server environment.

Varframe=document.getElementsByTageName ("iframe") [0]

Frame.contentWindow.document.XXX method

For example, frame.contentWindow.document.querySelector ("# btn"); / / get the node whose Id is btn in iframe.

Because there is no previous experience of using iframe to introduce the head, considering that in addition to jumping, the other function of the head should be positioning, when the page is long, by clicking to accurately locate somewhere. The introduction of iframe does not affect the jump of the page, what about the anchor point? It takes a try to find out.

Here, I would like to add a little more knowledge about anchor points:

The anchor can jump to the appropriate location on the current page or to the appropriate location on other pages.

There are two ways to implement an anchor, one is the a tag + name attribute, and the other is to use the tag's Id attribute.

The details are as follows:

a. How to use a tag + name attribute

Details

Click "details" to jump to the location.

b. Use the id attribute of the tag

Details

Click "details" to jump to the location.

Anchor failure often occurs when using a+name, so it is recommended to use id to bind anchor.

Back to the point, after the introduction of iframe, can we click on the elements in iframe to locate the corresponding location? here, we use iframe to introduce head.html, which is my original purpose.

So what we want to achieve is: click on the a tag of iframe, locate the corresponding position of the main Html, and find that it is impossible to achieve through html alone, but it can be achieved with the help of JS.

Document # leftFrame {display:block;}

Detail

_ window.onload=function () {variframe=document.querySelector ("# leftFrame"); varbot=iframe.contentWindow.document.querySelector ("# bot"); vartop=iframe.contentWindow.document.querySelector ("# top"); bot.onclick=function () {document.body.scrollTop=document.body.offsetHeight;}; top.onclick=function () {document.body.scrollTop=0;};}

There are elements in iframe where id is bot and top. Through the way of JS to achieve positioning.

In the main page, the document in the iframe can be returned as a HTML object through iframe.contentWindow, and the returned object can be processed through all the standard DOM methods.

In the iframe page, you can navigate to the parent html through parent, and you can navigate to the top-level html through top.

To call between sibling iframe, you need to locate to the parent html and then to iframe.

To supplement the knowledge of anchor points, the key role is to add # detail after the connection address (detail only refers to general). If the current url is localhost:8080/index.html. Then after the anchor point, url should be localhost:8080/index.html#detail.

The "#" identifier at the end of the URL address indicates that you need to jump to the corresponding location. # idName, the browser will find tags in the page that match the characteristics of "# idName". If the character followed by "#" in URL cannot be found in the text, if it is the current page, it does not jump, and if it jumps from another page, the top of the page is displayed.

Back at the top of the page, in addition to setting the scrollTop of body through JS (0 to the top, set to the height of body, jump to the top), another way is to go back to the top

2. With the help of ajax (jquery's load method)

There is another way to load the page with the help of jQuery's load method.

Load (url,data,callback); url is the URL of the HTML page to be loaded; data: key/value;callback sent to the server: callback function when the load is successful.

$(function () {$("selector1") .load ("page1.html"); $("selector2") .load ("page2.html"); $("selector3") .load ("page3.html");})

Through the js added in the DOM structure, the SEO (search engine optimization) has an impact, similar to Baidu spider can not be crawled! Generally speaking, it is not recommended to use it unless it is a last resort. Page1.html/page2.html/page3.html can write the Html fragments you need, because load came in, that is, loading asynchronously. When you need to get the elements of a page such as page1.html, you can use it in conjunction with setTimeout to ensure that the page is loaded.

3. Use HTMLimports

HTMLimports provides a way to include and reuse one HTML document in another HTML document. At present, Google has fully supported the HTMLimports,Opera35 version, but FF still does not. (type: chrome://flags in Google's address bar to enable or disable some features)

Although the compatibility of HTMLimports is not very good at present, it is still necessary for us to understand how to use it. W3C has released a draft standard for HTMLimports, which I believe will be widely used in the future. Use HTMLimports

Document

Varpost=document.querySelector ("link rel = 'import']"). Import;varcon=post.querySelector ("p"); document.querySelector ("# content") .appendChild (con.cloneNode (true)); varclone=document.importNode (con,true) document.querySelector ("# content") .appendChild (clone)

This paper presents two ways to insert the parts we need in the html from import into the current html.

Finally, we briefly introduce document.querySelector and document.querySelectorAll, which are new methods introduced by HTML5 in WebAPI and greatly simplify the selection of elements in native Javascript code.

Both document.querySelector and document.querySelectorAll receive a string as a parameter, which needs to conform to the CSS selection syntax, namely: tag, class selector, ID selector, attribute selector (E [type = "XX"]), structure selector (: nth-child (n)), etc. Pseudo class selector is not supported.

The document.importNode (node,deep) method copies a node from another document to that document for application, and the second value is true, then all descendant nodes of that node are also copied.

Node.cloneNode (deep): clone an existing node. The threshold value is true, which means to clone its descendant node. If deep is false, only the node itself is cloned.

In addition to the above methods, a more mainstream way is to use component-based development. Each part acts as a component.

What are the characteristics of html 1, simplicity: hypertext markup language version upgrade using superset mode, thus more flexible and convenient, suitable for beginner front-end developers to use. 2. Extensibility: the wide application of hypertext markup language brings the requirements of strengthening functions and increasing identifiers. Hypertext markup language adopts the way of subclass elements to ensure the expansion of the system. 3. Platform independence: hypertext markup language can be used on a wide range of platforms, which is one of the reasons why the World wide Web is so popular. 4. Versatility: HTML is the universal language of the network, which allows web producers to create complex pages that combine text and pictures, which can be viewed by anyone else on the Internet, no matter what type of computer or browser they are using.

This is the end of the introduction of "what is the method of introducing external pages into Html". More related content can be searched for previous articles, hoping to help you answer questions, please support the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.