jsポップアップメニュー/ウィンドウ効果_javascriptスキル-jsチュートリアル-php.cn

ポップアップメニューのアクセシビリティサポートを改善する必要がありますか?この記事では、次の 3 つの一般的なポップアップウィンドウについて説明します。

window.open 新しいブラウザウィンドウ
作成されたウィンドウ <br> ページ DOM 作成された疑似ポップアップウィンドウ: ポップアップなどヒントなど <br><br><strong>1. ページに JS がない場合 <br></strong> 一般的に、JS がない場合は HTML の動作に従って処理します。リンクをリンク可能にすれば解決します。これは比較的簡単です。<br><br>1. 新しいブラウザウィンドウを開きます。JS トリガーを <a /> にバインドしてみてください。これで完了です。。 <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="76774" class="copybut" id="copybut76774" onclick="doCopy('code76774')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code76774"> <br>// リンクの目的は同じです。 window.open<br><a href="/target.html" target="_blank">[open window]</a> <br>// デフォルトでリンクをブロックすることを忘れないでください。 JS がある場合に 2 回開かれます<br>window.open('./iframe.html', 'name', 'height=300,width=500'); <br>return false; >2. <iframe / > 作成されたウィンドウ: JS を使用して動的に作成される場合は、トリガーも window.open メソッドのようにする必要があることを覚えておいてください。ユーザーはリンクを通じてアクセスできます。非表示になっている場合は、<noscript /> を使用して非表示にしてから、JS を使用して通常どおり表示するか、高さ 0 の空の iframe を使用してください。これにより、JS が存在する場合は利用可能になり、JS がない場合でも正常に表示できるようになります。詳細なアプリケーションについては、「Alipay の新しいホームページのいくつかのフロントエンドプラクティス」を参照してください。 <br> </div> <br><br><div class="codetitle">コードをコピー <span><a style="CURSOR: pointer" data="68488" class="copybut" id="copybut68488" onclick="doCopy('code68488')"><u> コードは次のとおりです: </u></a> </span>// 動的に作成されるので、使用してみてください。このメソッドは、IE8 が動的に作成されたフォーカス可能な要素にフォーカスするために JS を使用できないためです。 </div>// 空の src には javascript:'' を使用してください。これがパフォーマンスの問題を解決する最良の方法であるためです。詳細については、「空のパスの影響」を参照してください。ページのパフォーマンスに関する解決策<div class="codebody" id="code68488"> <br><a href="/target.html" target="_blank">[open iframe]</a> <br><iframe src="javascript:'' " Frameborder=0 id="theframe">
// js
document.getElementById('theframe').src = '/target.html'

3. ページ DOM によって作成された疑似ポップアップウィンドウ: