タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化 | blog.jxck.io
しかし、実際に M92 がリリースされてからは、この機能が壊れたことによる影響が多数報告されていたため、実装者が想定していた以上に影響はあったといえるだろう。 他のブラウザの反応 実際にロールアウトしたのが Chrome/Edge であったため、いつものように「また Google が勝手にやっている」と思う人もいるようだが、実際には他のブラウザも Positive を表明している。 Firefox: https://github.com/whatwg/html/issues/5407#issuecomment-606417807 Safari: https://github.com/whatwg/html/issues/5407#issuecomment-760574422 また、この合意が取れているため、既に仕様にもマージされている。 Add early return to JS dia
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK Thanks @domfarolino for the heavy lifting with spec & tests 🎉 https://t.co/GLy6qHE7l5 — Simon Pieters (@zcorpan) July 8, 2020 YouTube 動画でネイティブ Lazy-load ネイティブ Lazy-load は、loading=lazy 属性を追加するだけで遅延読み込みを可能にします。 専用の JavaScript は不要です。 ブラウザの標準機能として Lazy-load をサポートします。 もとともは Chrome の独自機能として Google が開発しました。 Ch
DOMDOM トークス #1 mizdra (みずどら) です 株式会社はてな フロントエンドエキスパートやってます DOM をとりまく ブラウザのセキュリティ の話 DOM 成分ほとんど無いです 「iframe」がちょっと登場するくらい すみません... 皆さんご存知 ツールバーに機能を足したり Webページをカスタマイズしたり Webページにスクリプトを埋め込める機能 Web ページをカスタマイズしたい時によく使う code:content-script.js // ページ中のテキストを真っ赤に document.querySelectorAll('*') .forEach(el => el.style.color = 'red'); (ここまで3分) Chrome 開発チームが「Content Script の中で機密データを保持するな」と言ってる https://groups.go
GitHub - bluwy/whyframe: Develop components in isolation with just an iframe
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
“https://www.youtube.com/embed/16RxJwNwvfQ” Youtubeの動画のURLをWordPressの投稿画面に貼り付けると下のような感じで自動的に動画の埋め込みに変換してくれる これは、URLをこんな感じのhtmlに自動的に変換してくれているから <iframe loading=”lazy” class=”youtube-player” width=”1256″ height=”707″ src=”https://www.youtube.com/embed/16RxJwNwvfQ”></iframe> lazyload WordPressには標準機能でimgタグやiframeタグにloading=”lazy”を追加してくれるので、自分で書かなくてもOK loazyloadというのは動画がページの表示範囲に入ってくるまでは動画を読み込みしないための設定
画面外のイメージおよび iframe を自動的に遅延読み込みする Chrome のライトモードユーザー向け Lazy-loading について
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads 71 Ads API 11
JSer.info #551 - Yarn 3.0がリリースされました。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩💻👨💻 berry/CHANGELOG.md at master · yarnpkg/berry Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解などの変更を含んでいます。 @yarnpkg/sdks: Editor SDKs @yarnpkg/pnpify: PnPと互換性のないツールを実行するツール @yarnpkg/nm: node_modules linker また、 exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuil
iframeタグを使ってwebページにコンテンツを埋め込もう
iframeを使って外部のwebページを埋め込む方法を紹介します。 sandbox属性によるセキュリティの話やscrolling属性でのスクロールの設定方法などの基本はもちろんのこと、iframeの分割表示の方法や代替案となるobjectタグの使い方も解説しています。 そのほかにもwebサイト制作でよく使用する GoogleMapYoutubeの動画の埋め込み方法Facebook、Twitter、Instagramといった三大SNSのタイムラインの埋め込み方法 それぞれステップ形式で丁寧に解説しているので、iframeをマスターできること間違いなしの記事です！
以前に、以下のような記事を書きました。 blog.a-know.me これでもまぁ便利なのですが、コピペでいいとはいえちょっとしたコードを埋め込まなければいけなかったり、そもそもはてなブログ以外のブログではどうやればいいのよ、といった、ビギナーにはちょっと難しめなところがありました。 これが、今日実施した Pixela のアップデート（ Release v1.12.1 · a-know/Pixela · GitHub ）により、以下のような iframe タグで簡単に埋め込めるようになりました。 <iframe src="https://pixe.la/v1/users/a-know/graphs/test-graph.html?mode=simple" height="155" width="720" frameborder="0"></iframe> このタグを実際に埋め込んでみると↓
iframe の中で ES Modules のコードを評価する
rollup のような ESM を吐くツールのプレビューツールを作っていると、文字列として組み立てたコードを安全に評価したいことがあります。 方法 iframe を createObjectURL dynamic import で data uri として文字列を評価 得られた関数を実行 コード // これを評価したい const code = `export default () => { console.log("xxx") }`; // 追記:2020/06/24 ユニコード文字対応 const encoded = btoa(unescape(encodeURIComponent(code))); const blob = new Blob( [ `<!DOCTYPE html> <html> <head> </head> <body> <script type=module> im
iframeタグを使うと、別のページの内容が埋め込めるということは前回の記事で書きました。 ⇒「知っておくと便利！別のページを記事の中に埋め込むiframeの基本的な使い方」 ただ、iframeタグは、ただただ使ってしまうとスマホやタブレット、PCどこからみてもキレイな表示のレスポンシブ対応にはなりません。 そこで今回は、iframeタグのレスポンシブ対応について調べて実践してみました。 iframeをレスポンシブ対応させる方法（基本編） 例えばこのようなiframeのタグを使うと、レスポンシブ対応されません。スマホやタブレットで見るとはみ出したり変な表示になります。 <iframe src="埋め込むページのURL" width="750" height="350" frameboader="0"></iframe> レスポンシブ対応させる方法。HTMLとCSS そこで、以下のように親要
iframe版無料GoogleMAPのHTMLを取得 WEB版のGoogleMAPを開きます https://www.google.co.jp/maps/ 「共有」マーククリック 「地図を埋め込む」タブの「HTMLをコピー」をクリックすると、以下のHTMLソースが取得できます。 取得したこのHTMLソースをベースにして変更していきます。 ※レスポンシブ対応のためにCSSにあらかじめ「width:100%」を追加してあります。 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188
今日は、意識してあまり使わない要素でもある「iframe」要素についてのお話しになります。 html5になってからも少ないですが、使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか？ よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、そのときのレスポンシブ対応について、実はものすごく簡単に対応できますので、知らない方に向けての記事になります！ iframeは固定？ Google Mapを例にiframe要素を見てみると、「埋め込みサイズ」を決める必要があります。 そのため、レスポンシブ（＝デバイス幅による動的変化）はできないかも？と思ってる方が意外と多いようです。 確かに、属性でサイズを指定しただけですと「固定」となりますが、CSSを使うことによってレスポンシブ対応は可能です。 ブラウザによって多少異なるかもしれませんが、基
STORES EC本部のソフトウェアエンジニア @_morihirok です。 STORES ECではクリックジャッキングの脆弱性に対応するため、2021年の2月に他ドメインのサイトからのiframe要素などによる読み込みを制限するアップデートを行いました。 コンテンツセキュリティポリシー（以下CSP）を利用し安全にアップデートを行うことができましたので、今回はその取り組みについてご紹介させていただければと思います。 今回のアップデートに至るまでの背景 STORES ECのバックエンドはRuby on Railsで開発されています。Railsではデフォルトの設定で X-Frame-Options に SAMEORIGIN が指定されているため、「そもそも何もしなくてもクリックジャッキングの脆弱性には対応されているのでは？」と思われる方も多いと思います。 これには歴史的経緯がありまして、 S
iframeの高さを自動調節する - Qiita
親サイトにifremeを入れたときにうまく高さが指定できなかったので 参考になるサイトを探しまくりました。 要件 iframe。よくあるyoutube、googlemapではなく、別のサイトのiframe（クロスドメインと言う）。 iframe側の高さが動的に変わる場合（例：記事のタイトルとか、日によって文字数がかわるやつ）高さを固定すると変にスクロールがついてしまい、見た目が悪い。 iframe使ってるってなるべく気づかれたくないときに活用できる サンプルコード <script> window.addEventListener('message', function(e) { var iframe = $("#parentframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case '
JavaScriptでiframe内のDOM要素を取得したり操作する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってifr…
この設定の用途 GTMでGoogleAnalyticsの計測タグを貼ったらiframe内でまで読み込まれて計測が狂って困ったとき GTMでチャット用のボタンを表示させるタグを貼ったら狭いiframeの中にも表示されて困ったとき iframeの中で発火して欲しくないタグが発火してしまっている状況を回避するための設定方法を解説。 設定に必要な時間：3分 手順 1.変数の作成 まず、GTMがiframeの中で読み込まれたのかどうかを判別する変数設定を作成する。 「変数」タブを開き、「ユーザー定義変数」の領域内にある「新規」ボタンをクリック。 「変数タイプを選択して設定を開始...」と表示されている箇所、あるいは「変数の設定」と書かれている箇所をクリックすると 横からウィンドウが開くので、「カスタムJavaScript」を選択。 以下のように変数設定を完了する。 変数名 iframeからの呼び出し
iframeとは iframeとはWebページの中に別のWebページを埋め込む要素です。 <iframe src="sub.html" width="100px" height="100px"></iframe> srcで埋め込むページのアドレスを、widthで幅、heightで高さを指定します。その他のオプションなど、詳しくは以下の記事も参考にしてください MDN – <iframe>:インラインフレーム要素 [PR] Webデザインで副業する学習方法を動画で公開中 iframeをCSSで調整するには iframeで枠線を指定するframeborder、スクロールバーの表示有無を制御するscrollingは非推奨の属性になっています。枠線を制御するにはcssのborderプロパティを使用しましょう。以下は枠線を表示しない場合の例です。 iframe { border: none; } i
iframeもYouTube埋め込みもFacebookボタンも簡単に遅延読み込み。HTMLに14文字追加するだけ | 海外&国内SEO情報ウォッチ | Web担当者Forum
Web担当者に役立つ最新情報iframeもYouTube埋め込みもFacebookボタンも簡単に遅延読み込み。HTMLに14文字追加するだけ lazyloadが本格化 （web.dev） 海外情報ネイティブlazy-load（レイジー・ロード）は、JavaScriptのライブラリなしで遅延読み込みを実現できる仕組みだ。画像（imgタグ）またはiframe（iframeタグ）にloading="lazy"属性を追加するだけで実装できる。 当初はグーグル独自の技術でChromeだけがサポートしていたが、現在は、画像のネイティブLazy-loadもiframeのネイティブLazy-loadもウェブ標準となり、FirefoxやEdgeなどメジャーなブラウザがサポートするようになった（Safariは試験機能として有効にできる）。 iframeのネイティブLazy-loadは、つい最近ウェブ標準になっ
iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応） | フロントエンドエンジニアのblog
当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。 しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。 ただ、それぞれのサイズのWeb
iframeで埋め込むEmbedな動画を画面いっぱいにCSSだけでレスポンシブ対応で表示させる方法 - Qiita
画像の場合、background-image: url()にbackground-size: coverを指定することで、領域いっぱいに拡縮して画像が表示されるようにすることができます。 はじめに 目的 YouTubeやVimeoやDailymotionなどの動画をウェブサイトに埋め込む時には、<iframe>で埋め込む方法が最も一般的かと思います。 <iframe>で埋め込む動画を、background-size: coverのように領域いっぱいに拡大・縮小させて、レスポンシブに対応させてみたいと思います。 前提条件 メディアクエリとJavaScriptを駆使した方法やjQueryを駆使した方法の記事がありますが、JavaScriptを一切使わず、シンプルなCSSだけで実現します。 なお、この記事で埋め込む動画のアスペクト比はすべて16:9であることを想定してパラメータ値を書いています。
WebサイトでYouTube動画をレスポンシブ対応して埋め込む方法【iframe】 | Web Design Trends
今回は、WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法をご紹介します。 なお、この方法はiframeをWebサイトに埋め込む場合に利用可能なので、Vimeoやその他のサービスでも同様に扱うことができます。 YouTube動画の埋め込みコードの取得方法 YouTubeの埋め込みコードは、動画再生画面の「共有」から「埋め込む」を選択すると、下記のように埋め込み用のコードを表示することができます。 生成された埋め込みコードは、ライブラリやプラグインを入れなくても、HTMLに貼り付けるだけでWebサイト上に簡単にYouTube動画を表示することが可能です。 YouTube動画埋め込みの表示例 YouTubeの埋め込みコードをそのまま貼り付けると、上記のように画面からはみ出してしまったり、width:100%を指定すると黒い空白が生まれてしまったりします。 表示幅が固定されている
frameまたはiframe要素内のdocumentオブジェクトを取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
frameまたはiframe要素内のdocumentオブジェクトを取得するには、element.contentDocumentオブジェクトを使用します。 element.contentDocumentオブジェクトはIE7以下、Safari9以下には対応していません。 代わりにelement.contentWindowからdocumentオブジェクトを取得します。 ※ frameまたはiframe要素で読み込まれているページが別ドメインである場合、クロスドメインの制約に引っかかり取得できない場合がありますのでご注意ください。 構文
はじめに iframe表示部分のクリックイベントを取得するという記事で、iframe内のイベントをiframeのcontentWindowに対しaddEventlistenerを登録して親ページで取得する方法を紹介しました。 この記事ではpostMessageを利用してiframeと親ページ間でやり取りする方法を紹介します。 この記事の対象者 ページに埋め込んだiframe要素から情報を取得したい ページに埋め込んだiframe要素と親ページ間で相互間のデータ送受信を行いたい ページにiframe埋め込みをする前提のページを作成して、イベント発生時に親ページに情報を渡したい iframeと親ページ間のデータ送受信 postMessageを利用した送受信の方法 子ページ データを親ページに送信する場合 window.parent.postMessage(message, targetOrig
こんにちは、daimaです。 本日は異なるクロスドメインでiframeを埋め込んで なおかつ画面を拡縮しても iframeの高さが自動で調整されるように レスポンシブ対応させる方法をご紹介します。 なぜ、この記事を書いたかというと 私が仕事で作ったカラーミーのECサイトに 別ドメインで制作したWordpressのブログサイトの 新着一覧を載せるという仕様があったのですが CORS(オリジン間リソース共有)に引っかかったり iframeだとレスポンシブ時に高さが自動で変わらなかったりで 思った以上に時間を取られてしまったので この記事を書くことで少しでも 同じ問題で悩む方を減らせればと思ったためです。 それではどうぞ。 コード <iframe id="iframe_indexBlog" src="https://◯◯◯.com/newslist" frameborder="0" style=
APIキー不要でiframe形式GoogleMapの色を変えてみる | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは。 エンジニアの松村です。 先日、久しぶりに競馬場へ行ってきました。 この秋から一定数の指定席のみが開放され、その席数分入場できるといった形で営業が再開されました。 大勢のファンで賑わっていた、コロナ以前の競馬場の姿とは大きく異なっていましたが、それでも目の前で競走馬が駈ける姿を見れたことが嬉しかったです。 来場されてたい他の方々も、久々の競馬を静かに楽しんでいるようでした。 さて、今回はGoogleMapについてです。 2018年にGoogle Maps APIの仕様が大きく変わり（Google Maps Platform）、サイト上のGoogleMapカスタマイズにはAPIキーが必須となりました。 仕様変更に伴い、iframeに差し替えた方も多いのではないでしょうか。 iframeのGoogleマップは基本的にカスタマイズ出来ないのですが、実はcssで色合いを変更することが可
iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。 iframeで取得表示されたYouTubeのwindowオブジェクトを取得し、postMessage()メソッドでAPIのコマンドを送信して操作する。 埋め込むiframeにJavaScript APIの使用を許可するパラメーターを付与。 iframe内で表示している外部サイト(YouTube)のwindowオブジェクトを取得。 取得したwindowオブジェクトにpostMessageメソッドでAPIのコマンドを送信。 HTMLに埋め込みコードとコントローラー要素を記述 iframeの埋め込みコードにAPIの使用を許可するパラメーター「enablejsapi=1」を付与する。このパラメーターを付与しない場合、デ
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
YOUTUBEのiframeを直書きしてapiを使う方法
YOUTUBE動画の埋め込みに使えるYouTube Player APIですが、iframeをHTMLに直書きするやり方がなかなか見つからなかったのメモです。見つからなかったとは言いますがあまり記述方法は変わりませんでした。 iframeの設置 まずは普通にiframeを設置します。 動画ページの共有から埋め込むを選択するとiframeのコードが表示されるのでそれをコピペします。 <iframe width="560" height="315" src="https://www.youtube.com/embed/IDを入れる" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> apiを使えるようにする このままだとapiは使えないため、iframeのsrcのURLにステータスを追加します
Iframe credentialless: Easily embed iframes in COEP environments - Chrome Developers
Iframe credentialless is enabled by default from Chrome version 110. It solves the most common complaint developers working with Cross-Origin-Embedder-Policy (COEP) have: embedding third-party iframes that do not set COEP. It was previously available as an origin trial from version 106 to 108, and known as anonymous iframe. # Why we need COEPSome web APIs increase the risk of side-channel attacks
海外でフリーランスをしているテクニカルアーティスト ゲーム開発・映像制作・WEB制作等を請け負っています。 当ブログは作業効率化のための技術ブログです。 ブログにスプレッドシートの表を貼り付けるやり方 ファイル＞ウェブに公開 埋め込むのボタンを押して、表示したいシート名を選ぶ 生成されるHTMLのコードを確認 このままだとシート全体に公開されるのと、表の表示が小さいのでコードを書き加える <iframe src="https://docs.google.com/spreadsheets/d/?????&single=true&widget=true&headers=false"></iframe> 表のサイズ指定 iframe → iframe width="600" height="400" 表の範囲指定（A1:N14） &headers=false →
Mission データサイエンス教育総合研究所は、AI・機械学習の教育研究に特化したシンクタンクです。AI・機械学習を中心に、テクノロジーに関する記事を多く掲載しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iframe sandboxでユーザー入力スクリプトを実行する
Firefox派生ブラウザー「Pale Moon」がレガシーアドオンのサポートを復活！ v31.0.0が公開／Firefox用の旧式アドオンを再び利用可能に。iframeサンドボックスなどの脆弱性も修正
iframe を使って安全にブラウザ拡張機能を実装する - mizdra
loading=”lazy”が使えるのはimgタグとiframeタグ、videoタグには使えない
2021-08-03のJS: Yarn 3.0、Chrome 93 beta、cross origin iframeでのalert/prompt/confirmを削除
草グラフを iframe タグで簡単に埋め込む（Pixela v1.12.1） - えいのうにっき
iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済み
iframe埋め込みGoogleMAPの色を変える方法(API不要・無料)
iframeのレスポンシブ対応はもの凄く簡単 - Webデザイン・プログラミングオンライン個別指導のAkros
CSPを利用してRailsアプリから安全にiframeを制限する - STORES Product Blog
【GTM】iframe内でタグを発火させないトリガー設定 - Qiita
CSSでiframeタグの高さを自動調整する方法を現役エンジニアが解説【初心者向け】
Google Mapをiframeで利用する際のオプションとレスポンシブ対応させるためのHTMLとCSSを紹介（住所指定で表示もできるよ！）
iframeと親ページ間でpostMessageを利用してデータ送受信を行う - Qiita
クロスドメインでiframeを読み込ませてついでにレスポンシブ対応もする方法
iframeで埋め込んだYouTube動画をJavaScriptで操作。
iframeをサムネクリックで全画面かつ自動再生させたい。（IE）
スプレッドシート│表を指定範囲にだけiframeで埋め込む方法 | CGメソッド
【Selenium】要素を取得・発見できない場合はフレーム(iframe)を疑う【Python】
codezine.jp
www.facebook.com
news.livedoor.com
number.bunshun.jp
ascii.jp
anond.hatelabo.jp