HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌微信網頁版詳解-html教學-PHP中文網

首頁

web前端

html教學

HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌微信網頁版詳解

小云云

May 12, 2018 pm 04:44 PM

htmliframe使用

winform結合html5能實現什麼功能？突有心血來潮，想在裡面嵌套一個微信網頁版，下面小編給大家介紹下HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌微信網頁版的實現方法，一起看看吧，希望能幫助到大家。

就想弄一個winform結合html5的小東西，突有興致，想在裡面嵌套一個微信網頁版。

好了，想法一出來，就行動吧，最終效果如下圖：

#一開始就打算在裡面嵌套一個iframe指向https ://wx.qq.com就OK了，但我還是太天真，微信網頁版會自動跳轉。結果如下圖：

於是上網搜了一下阻止iframe跳轉的辦法，就是在iframe標籤加上security="restricted"sandbox="" 兩個屬性。前者是IE的禁止js的功能，後者是HTML5的功能。

使用sandbox="allow-scripts allow-same-origin allow-popups"可以阻止跳轉。然而......結果卻是這樣：

然後發現，這個跳轉其實就是關閉原先頁面之後在瀏覽到跳轉頁面。所以可以利用頁面關閉事件onbeforeunload來阻止跳轉。所以在頁面加入如下程式碼：

 document.body.onbeforeunload = function (event) {
             var rel = "asdfawfewf";
             if (!window.event) {
                event.returnValue = rel;
            } else {
                window.event.returnValue = rel;
             }
         };

然後發現結果還是這樣：

到底是什麼原因呢？事件沒反應？還是微信網頁版的跳躍太牛了？直接無視這個事件？於是我新建一個空白的html，單獨加上該事件進行驗證。

<!DOCTYPE html> 
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="utf-8" />
      <title></title>
  </head>
  <body></body>
  <script>
document.body.onbeforeunload = function (event) {
    var rel = "asdfawfewf";
     if (!window.event) {
         event.returnValue = rel;
     } else {
         window.event.returnValue = rel;
     }
 };
 </script>
 </html>

結果卻是可行的：

但是在頁裡面嵌入iframe之後卻直接就跳轉了，大家可以嘗試一下面的程式碼。

<!DOCTYPE html> 
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="utf-8" />
      <title></title>
  </head>
  <body>
      <iframe src="https://wx.qq.com/" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
     </iframe>
 </body>
 <script>
 document.body.onbeforeunload = function (event) {
     var rel = "asdfawfewf";
     if (!window.event) {
         event.returnValue = rel;
     } else {
         window.event.returnValue = rel;
     }
 };
 </script>
 </html>

正在毫無計策的時候，我一直打開關閉嘗試該方法是否生效。突然發現，如果頁面在剛開啟的很短時間內關閉頁面，onbeforeunload事件是不會被觸發的，在等待幾秒鐘之後再關閉頁面就會觸發事件出現提示。

來，試試看iframe延遲對src賦值(這裡引用了JQuery)。

<!DOCTYPE html>
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="utf-8" />
     <title></title>
      <script src="scripts/jquery-2.2.3.js"></script>
  </head>
  <body>
      <iframe id="iframe" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
     </iframe>
 </body>
 <script>
 $(function () {
     setTimeout(function () {
         iframe.src = "https://wx.qq.com/";
     },5000);
 });
 document.body.onbeforeunload = function (event) {
     var rel = "asdfawfewf";
     if (!window.event) {
         event.returnValue = rel;
     } else {
         window.event.returnValue = rel;
     }
 };
 </script>
 </html>

結果果然成功了，會出現提示是否離開此頁面，點擊留下按鈕。成功沒有跳轉。下圖為我成品圖片。

大功告成，裡面可以正常聊天和傳文件，但不能截圖。

缺點不足的就是，完成登陸需要點選彈跳視窗取消按鈕，而且需要兩次，第一次開啟頁面，第二次掃碼結束後還會跳轉一次頁面。目前還沒辦法解決這個問題，希望有辦法解決這個問題的朋友可以提點建議。

相關推薦：

原生ajax和iframe框架實作圖片檔案上傳的兩種方式

PHP利用iframe實作圖片上傳顯示

利用JQuery操作iframe父頁面、子頁面方法總結

以上是HTML阻止iframe跳轉頁面並使用iframe在頁面內嵌微信網頁版詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。