検索
ホームページウェブフロントエンドjsチュートリアルjsにおけるwindow.nameの特徴と機能を詳しく解説

jsにおけるwindow.nameの特徴と機能を詳しく解説

ウィンドウに name 属性があることは以前から知っていましたが、それが何に使われるのかは知りませんでした。今日、時間をかけて調べてテストしたところ、次のことがわかりました。それは興味深い JS API 属性であることがわかります。

推奨チュートリアル: 「JavaScript ビデオ チュートリアル

すべてのブラウザには window.name

ウィンドウがあります。 name はすべてのブラウザに共通の属性で、ブラウザ ウィンドウの名前を示します。デフォルトは空の文字列であり、すべてのブラウザは空の文字列です。

jsにおけるwindow.nameの特徴と機能を詳しく解説

#これは読み取りおよび書き込み可能な属性です。構文は次のとおりです:

string = window.name;
window.name = string;

例:

window.name = 'zhangxinxu';

window.name

window.name のクロスページ機能には、非常に興味深いクロスページ機能があります。具体的な説明は次のとおりです。 window.name で設定すると、他のページにジャンプしても、この window.name は保持されます。

たとえば、次のデモについては、ここをクリックしてください:

window.name とリンク アドレスのテスト デモ

ページには 2 つのハイパーリンクがあり、[ハイパーリンク時] をクリックします。の場合、

name 属性値は現在のページの window に設定されます:

jsにおけるwindow.nameの特徴と機能を詳しく解説

HTML コードは次のとおりです:

<a href="./window-name.html" onClick="window.name=&#39;zhangxinxu-1&#39;;">点击我看看目标页面的window.name</a>
<a href="./window-name.html" onClick="window.name=&#39;zhangxinxu-2&#39;;">点击我看看目标页面的window.name</a>

次に、window-name.html ページが行うことは非常に簡単です (以下のコードを参照)。ページがロードされた後に

window.name 値を出力することです。

<!-- window-name.html页面中的代码 -->
<p>window.name值是:<output id="output"></output></p>
<script>output.textContent = window.name;</script>

最終的な効果は次のとおりです:

  • 最初のリンクをクリックすると、現在のページが設定されます

    window.name='zhangxinxu-1' , このとき、window-name.html ターゲット ページで表示される情報は次のようになります。 window.name

    の値は
  • 'zhangxinxu-1'
です。

jsにおけるwindow.nameの特徴と機能を詳しく解説

  • この時点で、ソース ページに戻ります:


  • # #2 番目のリンクを再度クリックします:

jsにおけるwindow.nameの特徴と機能を詳しく解説

    ターゲット ページに
  • window.name# が表示されることがわかります。 # #値は

    'zhangxinxu-2'

    です。

jsにおけるwindow.nameの特徴と機能を詳しく解説

  • この機能は非常に興味深いものです。ソース ページに設定された

    window.name 値を実際に記憶できます。これは次のとおりです。 document .referrer に相当するものはさらに使いやすく、任意の文字を直接指定できますが、document.referrer

    は URL も処理する必要があります。
たとえば、上記の例では、window-name.html ページはどのリンクから来たのかを認識し、さまざまなソースに従ってさまざまな処理を行うことができます。 URL を介してパラメーターを送信します。

jsにおけるwindow.nameの特徴と機能を詳しく解説

新しいウィンドウで開かれた window.name は無効です

window はウィンドウを意味するため、上記の <a></a>Link 新しいウィンドウが開くときに

target="_blank"

を設定すると、ターゲット ページの

window.name

は空の文字列 '' になります。これは、

window.name

が設定されたウィンドウではなく、新しいウィンドウであるためです。 したがって、window.nameページ間でのデータ転送には依然として一定の制限があります。 window.name はドメイン間では使用できません。

window.name

の値はブラウザによって決定されます。 . フォームが移動するので、フォーム内にいれば値を共有できるので、クロスドメインのデータ取得が実現できます。これは、以前は「ウィンドウ」と呼ばれたクロスドメインの手法としてよく知られていました。 name Transport"。興味がある場合は、この 2008 年の古い記事 を参照してください。ここでは詳しく説明しません。このクロスドメイン メソッドは JSONP より安全です。

それでは、なぜ質問が拡張されないのかについてお話したいと思います。クロスドメイン通信を実現するために window.name を使用するのは役に立たない方法だからです。postMessage を使用してください。クロスドメインおよびクロスドキュメント。Communication が置き換えられ、より優れており、より安全で、より強力です。

有此看来,现在window.name这个属性已经没什么卵用了,除了上面提到了偶尔可以用来在同一窗口前后页面之间做简单的数据传递,包括JSON字符串数据。

window.name = &#39;{ "foo": "bar" }&#39;;

最后总结一下

 1. window.name可读可写,指支持字符串;

 2. window.name的值跟着浏览器窗口走的,不是跟着页面走的;

 3. window.name没什么卵用,知道他没用就是很有用的知识。

好,就这么多,让我搞清楚了传说中的window.name到底是个什么鬼,我表示很满足。

原文地址:https://www.zhangxinxu.com/wordpress/?p=8947

更多编程相关知识,请访问:编程入门!!

以上がjsにおけるwindow.nameの特徴と機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はzhangxinxuで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。