1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLにおけるiFrameタグの2つの使い方の紹介

2022-01-09 16:14:29

最近、プロジェクトで布のポケットのお気に入りがあります。要するに、お気に入りの写真をブードルページに集めるというもので、iframeについていろいろと工夫しているのですが、まとめると以下のようになります。
  1. 下カバーを敷くポップアップ層として

  ページ全体を覆うようなブラックマスクをしたことがある場合、たまたまユーザーがIE6を使っていて、たまたまページ上にselect要素があると、頭痛の種になります(ここでは原理は触れません)。ポップアップDIVではselectをカバーできないことがわかるので、今度はiframeが登場する番です。ロジックは以下の通りです。

    iframeをpopup divと同じ階層に配置する。
    iframe の z-index が pop-up div の z-index よりも小さいことを確認する。
    ウィンドウのサイズ変更とスクロールのイベントを追加して、iframe がページ全体をカバーするようにします。

  コードの一部

XML/HTMLコード コンテンツをクリップボードにコピーする
  1. ヴァー  iframe  =  U .isie6() ? ' < iframe スタイル = "position:absolute;left:0;top:0;z-index:2000000;filter:α(opacity=0); width:100%;height:' + ds.height + '". フレームボーダー = "0" > < iframe > ' : '';   
  2. $container.append(iframe).appendTo($body)を実行します。  

  2. ドメインをまたいだCookieの書き込み

  a.comとb.comという2つのドメインがあり、特定の条件下ではbの機能の一部がaのページに表示されます。aのページで操作するときに、b.comドメインのクッキーで何かを行い、ユーザーが次回アクセスしやすくする必要があることがあります。必要なことは、aページにiframe(動的または固定)を追加し、src属性がbのプロキシページを指すようにし、このページでクッキーの操作を実行することだけです。 {ページaに、src属性がページbのプロキシページを指すiframe(動的または固定)を追加し、このページでCookieの操作を行うことで実現できます。