Htm5技巧集锦

1、在实际项目中，有时候需要在一块内容中引入另一个页面的html，比如有Page_1.html和Page_2.html，如何在Page_1.html主页里引用Page_2.html？

【这里的“引入”是调用或嵌入的意思，不是指超级链接，链接可以使用这样的方式<a href="XX.html">的格式。关于HTML5超级链接，可参见https://blog.csdn.net/cnds123/article/details/113782944 】

使用iframe浮动框架可以自由控制窗口大小，实际上就是在窗口中再创建一个窗口。

预备知识

使用iframe浮动框架可以自由控制窗口大小，实际上就是在窗口中再创建一个窗口。例如

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>iframe浮动框架例子</title>

</head>
<body>
       <iframe width="90%" height="300px"src="http://www.baidu.com"></iframe>
</body>
</html>

保存文件名为iframeDemo.html，放在文件夹（目录）中（我这儿是D:\HTML5技巧集锦，你可以根据你的实际情况而定），用浏览器打开iframeDemo.html，显示效果如下：

下面给出问题解决方案：

page_1.html的内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_1</title>
</head>
<body>
       这是page_1的内容，下面引用Page_2.html的内容
       <iframe align="center" width="100%" height="50" src="./Page_2.html"  frameborder="10px" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
       这是page_1的内容
</body>
</html>

page_2.html的内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_2</title>
</head>
<body>
   这是page_2，显示当前时间
   <div id="linkweb">  </div>
   <script>setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);  </script>
</body>
</html>

page_1.html和page_2.html放在同一个文件夹（目录）中（我这儿是D:\HTML5技巧集锦，你可以根据你的实际情况而定），用浏览器打开page_1.html，显示效果如下：

2、html中链接怎么返回上一页面，使用：

<a href="javascript:history.go(-1);">返回上一页</a>

上句实现返回上一个页面，后退一步，后退n步（多步）：<a href="javascript:history.go(-n);">返回上n页</a>

比如有Page_A.html和Page_B .html，如何在Page_A.html主页链接进入Page_B.html后，如何返回呢？

page_A.html的内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_A</title>
</head>
<body>
       这是page_A的内容<br/>
        <a href="page_B.html">打开链接page_B</a> 
</body>
</html>

page_B.html的内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_B</title>
</head>
<body>
       这是page_B<br/>
       <a href="javascript:history.go(-1);">返回上一页</a>
</body>
</html>

page_A.html和page_A.html放在同一个文件夹（目录）中（我这儿是D:\HTML5技巧集锦，你可以根据你的实际情况而定），用浏览器打开page_A.html，显示效果如下：

3、怎么一打开某个HTML页面文件就加载执行某个js的函数

法一、可以使用onload事件，body标签后面，使用onload在页面打开时就加载执行myfun()函数。格式

假设名为A.html网页文件中已有名为myfun()函数，将A.html网页中<body>改为<body οnlοad="myfun()">，打开名为A.html网页就将运行myfun()函数

A.html网页文件代码如下：

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>一打开页面就执行一个JS函数</title>
</head>
<body onload="myFun()">
<script>
      function myFun(){
          alert("myFun()函数执行了");
      }
</script>
</body>
</html>

法二、也可以将函数直接放在<script></script>之间调用，B.html网页文件代码如下：

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>一打开页面就执行一个JS函数法2</title>
</head>
<body>
<script>
      function myFun(){
          alert("myFun()函数执行了");
      }
      myFun(); //调用
</script>
</body>
</html>

在浏览器中打开A.html页面和B.html页面效果一样，显示如下图：

Htm5技巧集锦

Htm5技巧集锦

猜你喜欢