Home > Developer > Web Develop
Usually a site Head,foot,rightbar (the right entry) is the same, this part of the content can be introduced in the way, otherwise, once the need to modify, you need to modify 10, 20, and even more pages, is a tedious but meaningless work. With the help of PHP or JSP, the use of include can easily solve this problem, but if you are out of the back-end language, from the front-end perspective, can you solve this problem?
1, with the help of IFRAMEFirst, the most likely to think of is the use of the IFRAME, although HTML5 abolished the frame, but still retained the IFRAME, we can still continue to use, IFRAME has a Frameboder property, set the property value of 0 or no, remove the bounding box of the IFRAME. Then set the scrolling to No. This is completely possible, but remember to run in a server environment.
var frame = document.getElementsByTageName("iframe")[0]; frame.contentWindow.document.XXX方法, 如frame.contentWindow.document.querySelector("#btn");//获取iframe中Id为btn的节点.
Since there is no prior experience using an IFRAME to introduce the head, considering that the head is usually in addition to the jump, the other role should be positioning, the page is longer, by clicking, accurate positioning to somewhere. Page jumps, using IFRAME introduction and no impact, then the anchor point? This needs to be tried before I know it.
Here, add a bit of knowledge about anchor points:
The anchor point can jump to the corresponding position of the current page, and can also jump to the corresponding location of other pages.
There are two ways to implement an anchor, one is a tag +name attribute and the other is the id attribute of the tag.
Specific as follows:
A. How to use the A-label +name property
<a"#detail">详情</a> <a"detail"></a>
Click "Details" to jump to <a name = "detail"> the location.
B. Using the tag's id attribute
<a"#detail">详情</a> <div"detail"></div>
Click "Details" to jump to <div id = "detail"> the location.
The use of a+name often occurs when an anchor is invalidated, so it is recommended to use an ID to bind the anchor point.
In the end, after the introduction of the IFRAME, can we click on the elements in the IFRAME to locate the corresponding location, here, we use the IFRAME to introduce head.html, which is my original purpose.
So what we want to achieve is: Click on the iframe a tag, positioning to the main HTML corresponding location, through the implementation of the discovery, simply through the HTML is not possible, but with the help of JS can do.
<!doctype html><html lang="en"> <head> <!--website encoding format, UTF-8 International code, GBK or gb2312 Chinese encoding-- <meta http-equiv="Content-type" content="Text/html;charset =utf-8 " /> <meta name="Keywords" content="keyword One, keyword two"> <meta name="Description" content ="site description"> <meta name="Author" content="Yvette Lau"> <title>Document</title> <!--the introduction of CSS JS files-- <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 Span class= "Hljs-params" > () { 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>The IFRAME has an element with an ID of bot and top. Through the way of JS to achieve positioning.
In the main page, you can return the document in an IFRAME with an HTML object by using Iframe.contentwindow, so that the returned object is processed by the standard DOM method.
In the IFRAME page, you can navigate to the top-level HTML by using the parent to navigate to the parents HTML.
Called between the sibling IFrame, you need to navigate to the parent HTML before locating the IFRAME.
Supplementary points about the anchor point of knowledge, its key role is the connection address after the addition of #detail (detail only refers to). If the current URL is localhost:8080/index.html. After the anchor point, the URL should be localhost:8080/ Index.html#detail
A "#" identifier at the end of the URL address indicates the need to jump to the corresponding location. #idName, the browser will find a label in the page that matches the "#idName" feature. If the url "#" followed by characters in the text can not be found, if it is the current page, then do not jump, if it is to jump from other pages, the top of the page is displayed.
Back to the top of the page, in addition to the scrolltop can be set by JS body (0 to return to the top, set to the height of the body, jump to the top), another way is<a href = "#">回到顶部</a>
Another way is to load the page with the help of the jquery load method.
Load (URL, data, callback); URL is the URL to be loaded into the HTML Web page; Data: Key/value;callback sent to the server: callback function when loading succeeds.
$(function(){ $("selector1").load("page1.html"); $("selector2").load("page2.html"); $("selector3").load("page3.html"); });
JS added in the DOM structure, SEO (Search engine Optimization) has an impact, similar to Baidu Spider is unable to crawl! In general, it is not recommended to use when it is not a last resort. page1.html/page2.html/ Page3.html write the required HTML fragment, because it is load in, that is, asynchronous loading, in the need to get page1.html and other elements of the page, can be used in conjunction with settimeout, to ensure that the page is loaded in.
3. Using HTML ImportsHTML imports provides a way to include and reuse another HTML document in an HTML document. At present, Google has fully supported the HTML Imports,opera35 version, but FF still does not support. (in Google's address bar type: chrome://flags, start or disable some features)
Although the current compatibility of HTML imports is not very good, but we still need to understand how it is used, the user has published the HTML imports of the standard draft, I believe that later should be used more commonly. Using the HTML imports
<!doctype html><html lang="en"> <head> <!--website encoding format, UTF-8 International code, GBK or gb2312 Chinese encoding-- <meta http-equiv="Content-type" content="Text/html;charset =utf-8 " /> <meta name="Keywords" content="keyword One, keyword two"> <meta name="Description" content ="site description"> <meta name="Author" content="Yvette Lau"> <title>Document</title> <link rel = "import" href = "test1.html"/> </head> <body> <div id = "content" ></div> </body></html><script> var post = Document.queryselector ("link[rel = ' import ']"). Import; var con = post.queryselector ("div"); Document.queryselector ("#content"). AppendChild (Con.clonenode (true)); var clone = Document.importnode (Con,true) document.queryselector ("#content"). AppendChild (clone) </script>Two types of HTML that we need to insert import into the current HTML are given.
Finally, Document.queryselector and Document.queryselectorall are briefly introduced, both of which are the new methods introduced by HTML5 in the Web API, greatly simplifying 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: Label, class selector, ID selector, property selector (e[type= "XX "]), the structure selector (: Nth-child (n)), and so on. Pseudo-class selectors are not supported.
The Document.importnode (node,deep) method copies a node from another document to the document for application, and the second value is true, so that all descendants of that node are also copied over.
Node.clonenode (deep): Clones an existing node, with a deep value of true, which indicates cloning its descendant nodes. If Deep is false, only the node itself is cloned.
In addition to the above methods, one of the more mainstream approaches is the use of component development. Each part as a component.
How to introduce external pages in HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
