knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

2015-12-09から1日間の記事一覧

巨大なサイズの背景画像を使用したい

CSS

ブラウザごとに限界値がある background-imageで巨大なサイズの画像を読み込ませるとき、ブラウザによっては表示できなかったり、イレギュラーな表示をする場合があります。 リピートさせずに表示させたいとき、Safari(iOS)とFirefoxは要注意。 特にSafariで…

画像の読み込みに失敗したら

IE8以下のみで失敗する場合 IE8以下は、すでにブラウザがキャッシュをしている場合、onloadメソッドが走りません。(最新のブラウザではキャッシュをしていても走ります) var img = new Image(); img.src = hoge.jpg'; img.onload = function(){ //IE8以下…

正規表現の後方参照まとめ

使用するメソッド 置換などで活躍する正規表現ですが、サブマッチ文字列を参照して利用する(後方参照)場面も時おりあります。 個人的にも理解が曖昧な部分があったため、整理がてらまとめました。 正規表現によるマッチングを行うには、RegExp.exec とStri…

DOMオブジェクトとjQueryオブジェクトの相互変換

jQueryオブジェクト → DOMオブジェクト getメソッドの戻り値を参照します。jQueryオブジェクトの集合に対してgetメソッドを実行するとDOM オブジェクトの配列が返されます。 id名で指定したときなど一つしかない場合は0番目を、クラス名で指定したときなど複…

CSSを動的に追加する

要素を動的に生成し、headの子要素として追加する head内にCSSを記述するのと同じ結果になります。 jQueryのcssメソッドとは異なり、要素そのものにスタイルは直書きされません。 パフォーマンス向上のため、ページ読込み後に意図的に特定のスタイルシートを…

クロスドメインでiframeを扱う

以前、iframeについていくつか記事を書かせて頂きましたが、その続編です。 iframeで別ページを読み込む際、同じドメインでないとエラーが発生し、iframe内の要素にアクセスすることができなくなってしまいます。 一例ですが、子ページと同じ大きさにiframe…

画像のダウンロードを禁止する

右クリックを禁止する 右クリックは、contextmenuイベントで捕捉することができます。 コンテキストメニューが出ないようブラウザのデフォルトの動作を中止させます。 $('img').on('contextmenu', function(e) { e.preventDefault(); }); 関数内にalertを書…

iframeのキャッシュが強すぎる

iframeで外部HTMLを呼び出す際、iframe内のキャッシュが強すぎて意図しない挙動をすることがあります。 たとえば、同じページのみを呼び出し続ける等。 metaでキャッシュを残さないこともできますが、レギュレーション上できない場合があります。 そんなとき…

iframeの背景を透過

transparentとallowtransparencyを指定 (1) まず、iframeで読み込まれる側のページの背景を透過にする body{ background-color:transparent; } しかしこのままだとIE(8以下)では透過されません。 (2)iframeにallowtransparency属性を指定 <iframe src="○○○.html" allowtransparency="true"> ~ </iframe>