iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
JavaScript:iframe:外部のページを埋め込むのではなく、HTMLをそのまま埋め込みたい
イントロダクション HTML の iframe タグを使用すると、ある HTML 文書の中に、別の HTML 文書を埋め込むことができます。 通常、iframe タグを使って別の HTML 文書を埋め込む場合には、src 属性に外部の HTML 文書の URL を記載し、外部の HTML 文書を埋め込みます。 そのような目的であれば特にこれ以降のこの文章を読む必要は無いのですが、場合によっては外部の HTML 文書を埋め込むのではなく、HTML 文書をそのまま埋め込みたい場合があります。 想定する用途としては、次のケースが挙げられます。 グローバルな変数・オブジェクト・関数などを多用するような JavaScript コードを埋め込みたいが、それらのグローバルな変数・オブジェクト・関数などによって、埋め込み元のページに影響を与えたくないケース（グローバル領域の汚染を防ぐ） 埋め込み元のスタイ
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
