iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに WeChat の Web バージョンを埋め込むことに興味が湧いてきました。

さて、アイデアが浮かんだら、行動に移しましょう。最終的な効果は次のようになります。

当初は、ページに iframe を埋め込んで https://wx.qq.com を指すようにするつもりでしたが、あまりに無知だったため、WeChat ウェブバージョンが自動的にジャンプしてしまいました。結果は次のとおりです。

そこで、iframe リダイレクトを防ぐ方法をオンラインで検索しました。それは、iframe タグに security="restricted" と sandbox="" という 2 つの属性を追加するというものでした。前者はIEのjs無効化機能、後者はHTML5の機能です。

リダイレクトを防ぐには、 sandbox="allow-scripts allow-same-origin allow-popups"を使用します。しかし...結果は次のようになります:

その後、このジャンプは実際には元のページを閉じてからジャンプ ページを参照していることがわかりました。したがって、ページ終了イベント onbeforeunload を使用してジャンプを防ぐことができます。そこで、次のコードをページに追加します。

 document.body.onbeforeunload = 関数 (イベント) {
             var rel = "asdfawfewf";
             if (!window.event) {
                イベントの戻り値 = rel;
            } それ以外 {
                window.event.returnValue = rel;
             }
         };

その後、結果は依然として次のようになることがわかりました。

理由は何ですか?事件に対して何の反応もないのですか?それともWeChatウェブ版の飛躍が凄すぎるのでしょうか?この事件を無視するのですか?そこで、空の HTML を作成し、検証のためにこのイベントだけを追加しました。

<!DOCTYPE html> 
  <html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <ヘッド>
      <メタ文字セット="utf-8" />
      <タイトル></タイトル>
  </head>
  <本文></本文>
  <スクリプト>
document.body.onbeforeunload = 関数 (イベント) {
    var rel = "asdfawfewf";
     if (!window.event) {
         イベントの戻り値 = rel;
     } それ以外 {
         window.event.returnValue = rel;
     }
 };
 </スクリプト>
 </html>

結果は実現可能です:

ただし、iframe をページに埋め込んだ後は直接ジャンプしてしまいます。次のコードを試してください。

<!DOCTYPE html> 
  <html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <ヘッド>
      <メタ文字セット="utf-8" />
      <タイトル></タイトル>
  </head>
  <本文>
      <iframe src="https://wx.qq.com/" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
     </iframe>
 </本文>
 <スクリプト>
 document.body.onbeforeunload = 関数 (イベント) {
     var rel = "asdfawfewf";
     if (!window.event) {
         イベントの戻り値 = rel;
     } それ以外 {
         window.event.returnValue = rel;
     }
 };
 </スクリプト>
 </html>

困惑したとき、この方法をオンとオフに切り替えて、うまくいくかどうかを確認しました。突然、ページを開いてから短時間で閉じると、onbeforeunload イベントがトリガーされないことに気付きました。数秒待ってからページを閉じると、イベントがトリガーされ、プロンプトが表示されます。

さて、iframe を遅延させて src 値を割り当ててみます (ここでは JQuery が参照されています)。

<!DOCTYPE html>
  <html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <ヘッド>
      <メタ文字セット="utf-8" />
     <タイトル></タイトル>
      <script src="scripts/jquery-2.2.3.js"></script>
  </head>
  <本文>
      <iframe id="iframe" frameborder="0" style="position: absolute;border: navajowhite;left: 0;height: calc(100% - 30px);width:100%">
     </iframe>
 </本文>
 <スクリプト>
 $(関数() {
     setTimeout(関数() {
         iframe.src = "https://wx.qq.com/";
     },5000);
 });
 document.body.onbeforeunload = 関数 (イベント) {
     var rel = "asdfawfewf";
     if (!window.event) {
         イベントの戻り値 = rel;
     } それ以外 {
         window.event.returnValue = rel;
     }
 };
 </スクリプト>
 </html>

結果は成功しました。このページを離れるかどうかを尋ねるプロンプトが表示されます。[滞在] ボタンをクリックします。成功への飛躍はありません。下の写真は完成品です。

完了です。チャットやファイルの転送は普通にできますが、スクリーンショットを撮ることはできません。

欠点は、ログインを完了するには、ポップアップのキャンセルボタンを 2 回クリックする必要があり、1 回目はページを開き、2 回目はコードをスキャンした後にページが再びジャンプすることです。現在、この問題を解決する方法はありません。この問題を解決する方法を知っている友人が私に何か提案してくれることを願っています。タイムリーに返信します。123WORDPRESS.COM ウェブサイトをサポートしていただき、誠にありがとうございます。

<<:  MySQL 永続統計の詳細な説明

>>:  JavaScript でのモグラ叩きゲームの実装

推薦する

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

MySQLクラスタのDockerデプロイメントの実装

シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...

Linux システムで MySQL データベースの解凍バージョンをインストールして構成する方法

1. ファイルを現在のディレクトリに解凍しますコマンド: tar -zxvf mysql....ta...

Docker Swarm クラスタ管理の使用と原理の分析

Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...

DockerでGit環境を構築して構成するプロセス

DockerでGit環境を構成する仕事上、Docker 環境で GitLab リポジトリを操作する必...

Linux ユーザー状態とカーネル状態間の通信方法の詳細な説明

CPU 権限の制限により、Linux ユーザー状態とカーネル状態間の通信は、プロセス間通信を使用した...

NGINXがウェブサイトのPV、UV、独立IPをカウントする方法の詳細な説明

Nginx: PV、UV、独立IPウェブサイトを作成する人なら誰でも、ウェブサイトのPV、UV、その...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

CentOS 7 に mysql5.7 の解凍バージョンをインストールするチュートリアル

1. mysqlの圧縮パッケージを/usr/localフォルダに解凍し、名前をmysqlに変更します...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

Ubuntu 18.04 に MySQL をインストールする (グラフィカル チュートリアル)

ヒント: 以下の操作はすべて root 権限で実行されます。 # MySQL がインストールされてい...