如何讓你的網站在瀏覽器中自動跳轉到 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完整學習目錄

您的項目需求