如何让你的网站在浏览器中自动跳转到 HTTPS，提升网站安全性！

家好，我是网络系统技艺者，点击右上方“关注”，每天和大家分享关于网络设备及系统和企业组网方面干货。码字不易，如果您觉得文章还可以，就点赞+关注+收藏吧，也许在以后某个时间能够用得到。

要使浏览器在输入网址时自动跳转到 HTTPS，你可以通过几种方式来实现：

1、使用服务器端重定向：这是最常见的方法。你可以配置服务器，使其在接收到 HTTP 请求时，将请求重定向到对应的 HTTPS 地址。具体实现方式取决于你使用的服务器软件（例如 Apache、Nginx、IIS 等），可以通过配置文件来完成这个设置。

2、使用 HSTS（HTTP Strict Transport Security）：HSTS 是一个安全策略，它告诉浏览器在一段时间内强制使用 HTTPS 连接。在服务器响应的 HTTP 头中包含 HSTS 头信息，浏览器会记住并在指定的时间内自动将 HTTP 请求转为 HTTPS。但请注意，一旦启用 HSTS，客户端浏览器将会记住这个设置，即使服务器停止发送 HSTS 头信息，客户端仍然会强制使用 HTTPS。因此，在启用 HSTS 之前，请确保你的网站已经完全支持 HTTPS，并且你愿意承担由此带来的长期影响。

3、JavaScript 重定向：虽然不是最佳的，但你也可以使用 JavaScript 在页面加载时检测协议，并将页面重定向到 HTTPS 版本。这种方法不如服务器端重定向或 HSTS 安全可靠，因为它依赖于客户端浏览器执行 JavaScript。在 HTML <head> 标签中插入如下代码可以实现简单的 JavaScript 重定向：

<script>
  if (location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
  }
</script>

无论选择哪种方法，始终确保你的网站服务器已正确配置，并且已经在你的网站上使用了有效的 SSL/TLS 证书。

作者简介：

我是“网络系统技艺者”，系统运维工程师一枚，持续分享【网络技术+系统运维技术】干货。码字不易，如果您觉得文章还可以，就关注+收藏吧，也许在以后某个时间能够用得到。

时候，我们会希望网页自动跳转，应用场景包括：

提交表单后自动转到另外一个页面，
页面地址变了，希望访问老地址时能自动转到新地址，等等。

下面总结下如何在前端页面中控制跳转的方法：

利用html的refresh

<meta http-equiv="refresh" content="0;url=index.html">

其中0表示0秒以后跳转，可以自行设定时间。

利用js的href属性

window.location.href='index.html';

如果要设定延迟时间，则加上setTimeout

setTimeout("javascript：location.href='index.html'", 5000);

利用js的navigate方式

window.navigate("index.html");

自动刷新页面

在上述方式中，如果跳转的页面就是本页面，那么就是自动刷新页面的功能。

或者使用reload

location.reload()

window.history.go(-1);

其中 -1 表示上一页，如果没有负号的就是表示下一页

如果不是1而是 2,3,4......n 则表示前进或者后退 n 页

后退还可以用

window.history.back();

两者的区别是：
go(-1):返回上一页，原页面表单中的内容会丢失；
back():返回上一页，原页表表单中的内容会保留。

前进则对应的是：

history.forward()：

此外，还有一个参数 history.length 记录了页面前进的序号，如果等于0表示第一页

怎么选择

至此，自动跳转页面、刷新页面、前后切换的方法都齐了！方法多了就有了选择恐惧症？

基本原则：
单纯的页面跳转建议就用html的refresh方法，无需js代码，很简洁。
如果比较复杂，涉及js代码的业务功能，再加上跳转功能的，就用js的各种方法。
此外还要考虑页面是否刷新的问题，希望刷新就用go，否则用back/forward

HTML页面中嵌入其他页面的方法

在自己的页面中嵌入其他页面是一个非常重要的操作，既能丰富自己的页面样式又能增强页面的信息量。

举个例子，如果打算在自己的页面中插入一个视频网站的视频该怎么做呢？

假如我现在自己的页面中嵌入这个视频，

我只需要在视频下侧找到"分享"。

点击之后出现这样的对话框，如图：

通过在我们的页面中粘贴这段通用代码就可以显示这个视频了。

代码如下：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就写到我们的页面中试试吧。

首先复制"第一个网页.html"文件，改名为"在页面中嵌入页面.html"保存，然后用记事本打开，修改<head></head>标签中的<title>第一个页面</title>编辑为"在页面中嵌入页面"即可，完整代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

页面效果如下：

怎么样，是不是很神奇！

下面我们来分析一下这段代码的含义。

首先要引入一个新标签<iframe>，HTML的使用手册中翻译为"框架"，说实话，这么翻译初学者是不知所云的。这个框架元素的主要作用就是在自己的页面中嵌入其他页面。

在<iframe>标签中先指定路径属性即src。这里使用的是单引号，实际上只要是半角符号，单引号和双引号都可以的。

然后设置长宽属性，即width和height，大家可以尝试改变数据看看。

frameborder可以为iframe的窗口指定一个边框，大家可以尝试把0改成1看看。大家注意哈，这里输入30和输入1是一样的，因为这个属性不是定义边框的宽度，而是定义是否显示边框！在编程中叫做布尔值，0代表没有边框，1代表有边框！和我们点灯的开关一样！

如图：多了个边框出来。

最后'allowfullscreen'这个描述非常的奇葩，把它删掉没有任何影响。不晓得是干什么的，主要是也不符合html的语法（也可能是我没见识）。如果有详细了解的小伙伴欢迎留言指教，感激不尽。

下面我们尝试修改一下src属性，给它一个别的路径看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是，修改了src并保存文件之后要把原页面关闭然后重新打开才可以正常显示！

效果如下：

在浏览网页时我们还经常遇到这样的情况，就是有一个独立窗口显示嵌套的页面，上面有个标题，一点击就会跳到那个嵌入的页面上，这个其实很简答，使用一个<a></a>元素即可办到，示例代码如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

页面示例如下：

框架元素并没有换行，所有我们可以推测出<iframe>标签实际上是个内联元素，如何让它换行呢？

为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。

示例代码如下：

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

页面效果如下：

是不是很有意思。

下面我们来介绍一个更有趣的玩法。如图所示：

这个怎么做呢？

这就要介绍<iframe>标签中的另一个属性：name（名字）

示例代码如下：name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

这里讲个题外话，如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说，就是如果我们能叫出鬼神的名字就可以驱使它。

编程也是这样，我们给函数或变量一个名字后，就可以随时随地的驱使它。

现在我们给<iframe>起了个名字叫做"iframe"，当然您可以使用其他名字也没问题，但要使用英文或汉语拼音命名，名字是英语字母组合最好。

有了名字之后，<a>标签就要驱使<iframe>标签来显示自己路径下的内容，如何驱使呢？

大家还记得<a>标签中有一个target属性吗？只要让target="iframename"即可！

也就是target="iframe"。示例代码如下：大家要注意的是<a>标签也是内联元素，也需要添加display:block，不然也是排在一列显示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a><!--第一个a链接的是头条文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 歼20战斗机百科</a><!--第二个a链接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三个a链接的是本地图片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我们为不同的<a>标签赋予target="iframe"的属性，点击这些<a>标签就可以在叫做"iframe"的框架元素中显示自己的页面。这时我们可以把<iframe>标签中的src属性删除掉，保存文件后，关闭测试网页，再重新打开，效果如下:

初始状态下，因为框架元素中的src是空的，所以打开后是空白的。如果您觉得单调可以任意复制3个<a>中的一个href中的链接路径给<iframe>的src属性，打开就是相应的标签。这个就不演示了，大家自己试试即可。

点击第一个链接效果如下：

点击第二个链接如下：

点击第三个链接如下：

最后再强调一下，改完框架的src属性后需要关闭页面后重新打开才可以，刷新的话并不能正确显示！切记！

今天的示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的内容结束了，明天我将会为大家介绍<object>和<embed>这两个标签，它们可以在页面中嵌入更多有趣的东西。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：uni-app使用经验—vue页面和html页面如何互相调用接口并传参
下一篇：中无人机申请基于HTML文件格式的Qt界面及样式自动生成方法及系统专利，极大的提高了Qt界面应用软件的开发效率

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何让你的网站在浏览器中自动跳转到 HTTPS，提升网站安全性！

作者简介：

HTML页面中嵌入其他页面的方法

HTML完整学习目录

您的项目需求