JavaScriptで離脱防止アラートを表示する（ブラウザバック・リロード・タブ閉じ） - 株式会社ライトコード
リロード・タブが閉じられる時の対応 保存されていないデータがあるときに、誤ってページを閉じてしまわないようにアラートを出すやり方を紹介します。ブラウザで戻るボタンやリロードボタンが押された時、タブを閉じようとしたときに動きます。 beforeunloadを使います。ウィンドウや文書がアンロード（リロードやタブを閉じる）時のイベントです。同様に onbeforeunload でも設定できますが、addEventListener の方が推奨されています。 1window.addEventListener('beforeunload', (e: BeforeUnloadEvent) => { 2 const message = '入力内容が保存されない可能性があります。ページを離れますか？' 3 e.preventDefault() 4 e.returnValue = message
postMessageを使ってクロスオリジンなiframeからデータを受け取る - Qiita
はじめに こんにちは。HRBrainでオウンドメディアやランディングページの開発を担当している渡邉です。 SalesforceなどのMAツール製のiframeフォームをウェブサイトに埋め込むことがあります。 この記事では、ウェブサイトとiframeが異なるドメインの場合に、iframeからウェブサイトにデータを受け渡す方法について解説しています。 ▼ HRBrainサービスサイトにおけるiframeフォームの事例 クロスオリジンでのiframe操作の制限 iframeとウェブサイトが異なるドメインに存在している場合、ウェブサイトからiframe内の要素に直接アクセスすることができません。 ウェブサイトのURL： example.com iframeのURL： example.net これは、「同一オリジンポリシー」により、セキュリティの観点から、オリジンが異なるページへのアクセスは制限を受
Window: postMessage() メソッド - Web API | MDN
HTML DOM APIWindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 m
[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita
原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。 HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。（両ドメインのサイトが postMessage を実装している必要があります） コード例 基準サイトから外部サイトへメッセージを投げて、返信を受け取る場合のコード例です。外部サイトの window オブジェクトを必要とするため、iframe と併用されることが多いようです。 ＜基準サイト側＞ <!-- 外部サイトへメッセージを投げるためのiframe --> <iframe id="ifrm" src="http://外部サイト.com/xxx.html" style="display:none;"></iframe> <script typ
![[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d34a71cff31750693a10914780cd8109dfce478f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY3NTElMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODcxODc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YmExNTY3ZTlkNmFiZGJhZGRmZTNkMzExNzczMDY5ODU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D99fc2c9611a89cd3b6973298de710c6e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMHBvc3RNZXNzYWdlJUUzJTgxJUE3JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgyJUI5JUUzJTgzJTg5JUUzJTgzJUExJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJUExJUUzJTgzJTgzJUUzJTgyJUJCJUUzJTgzJUJDJUUzJTgyJUI4JUU5JTgwJTlBJUU0JUJGJUExJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YjM4OTVjM2I2NjVhYTRkZWExNzZkMTk4NmEyYTE3Zjk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MGJiMTA5NzhjNmVmMGUzMDhjZDk3M2Y2YWI4MGVjNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6695cff07fec06ec5ac3d9567ddd61a9)
【超便利】YubinBango.jsを使った住所自動入力フォームの作り方解説 - 株式会社PENGIN
粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 こんな悩みがある方に、便利なJavaScriptライブラリを紹介します！ 当記事ではJavaScriptのライブラリYubinBango.jsを利用して郵便番号を入力したら自動で住所を表示するフォームの作り方を解説します。 基本的な使い方からカスタマイズ方法を画像やコードを用いて詳しく解説するので、JavaScriptが苦手な方もこの記事を読めば郵便番号を入力したら自動で住所を表示するフォームを作れるようになります！
GTMとGA4でモーダルウィンドウの表示を計測する方法【コンテンツの最適化】 | Web改善のレシピ
GA4が難しいと思っている方へ、全体像が理解できる無料eBookを作りました。 以下のページからダウンロードしてご利用ください。 こうしたお悩みに応える記事です。 モーダルウィンドウとは、Webサイト上でユーザーへのお知らせなどをポップアップ表示する小さな画面のことです。バナーやボタンを配置し、申し込みフォームへの誘導枠として使用しているWebサイトも多いでしょう。 モーダルウィンドウの表示やクリックは、Google タグマネージャーを使用することで計測可能です。 モーダルウィンドウが意図通りにユーザーに見られ、コンバージョンに寄与しているのかを把握したいというWeb担当者の方もいるのではないでしょうか。 モーダルウィンドウの表示回数を計測することで、次のようなことを把握し、それに応じた改善策を立てることができます。 モーダルウィンドウ内のコンテンツのクリック率を計測することで、どのような
HubSpotの無料版のフォームのスタイルシート（CSS）を変更してフォーム入力をわかりやすくする
概要 ▶ HubSpotのフォームのCSSを変更して、フォームを入力しやすくするための方法を紹介。無料版に対応。本ページはプロモーションが含まれている場合があります ウェブのMA（Marketing Automation／マーケティング・オートメーション）でよく聞くツールのひとつがHubSpotです。 HubSpotの簡単な説明をすると、ベースにCRM（Customer Relationship Management／顧客とのやり取りを管理すること）としての機能がベースにあって、訪問客を惹き付け（アトラクト）、関係を築き（エンゲージ）、満足させる（ディライト）機能（※）があり、この流れを自動化も含め、より効果的に進めていくためのツールです。 もう少し知りたい方は以下のページをご覧ください。 インバウンドマーケティングとは？ | ハブスポット ※①惹き付ける（アトラクト） ②見込み客に転換す
ページ公開に関する機能 | 採用係長
ページ公開に関する機能 採用係長は、5つの求人検索エンジンと連携しています。 1つの求人票を作成して、連携するボタンを押すだけで、各求人検索サイトに一括で連携されるため、それぞれの求人サイトごとに求人票を作成する手間が不要です。 そのため、求人の管理コストを大幅に削減できます。 また、連携したサイト経由で応募があった場合、どのサイトから応募があったかアイコンが表示されるため、成果が見えることも選ばれる理由の１つです。 Googleしごと検索連携 Googleしごと検索は、検索エンジンでおなじみのGoogleが提供する求人検索エンジンです。 採用係長で作成・公開された求人票と連携し、求職者の検索ワードと関連して適切に表示されます。
モーダルを閉じたら動画も再生停止にする方法（videoタグ編）｜ゆーた 台湾移住🇯🇵🇹🇼
こんにちは！ 大阪でコーダーをしているゆーたです。 今回はモーダルを使用して、中に動画が埋め込まれている場合に、 モーダルを閉じると、再生されている動画も自動的に再生停止にする方法について書いてみたいと思います。 実際に実案件で少し悩んだので、記事にしようかなと思いました！ クリックするとモーダル内の動画が開き、モーダルを閉じると動画も再生停止します。 demoはこんな感じです↓ 基本的なモーダルの記述 基本的なモーダルとしては以下のような感じかと思います。 jQuery(function () { jQuery('.js-modal-open.js-play01').each(function () { jQuery(this).on('click', function () { let target = jQuery(this).data('target'); let modal =
正規表現チェッカー PHP: preg_match() / JavaScript: match()
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.1 PHP及びJavaScriptコーディング中に正規表現を記述する際の動作チェック等にご利用ください。 正規表現と対象文字列を入力し、[チェック！]ボタンをクリックすると、PHP: preg_match()と JavaScript: match()の実行結果がフィードバックされます。 正規表現
jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
<div> タグの内容を編集したい！ <span> タグの内容を編集したい！ そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。 用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。 サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。 <div id
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
Google Places APIで口コミを取得して評価で絞り込む - Qiita
Places APIで口コミをいじくる日本語情報があまり見つからなかったため、忘れないように記録しておきます。 公式はこちら（英語） Overview | Places API | Google Developers 口コミはこのへん（英語） Place Details | Places API | Google Developers 実装にはAPIキーが必要です。 APIキーの取得方法などはこのへんをチェケラ Google Maps PlatformでAPIキーを取得する方法 Google Maps の APIキー を取得する – ねんでぶろぐ Place IDを取得する 口コミを取得したい場所・建物・会社などを指定するために、Place IDというものが必要になります。 Place IDを調べてみる Place IDはこちらで調べます👇 Place IDs | Places API
カウントダウン・タイマーを設定表示する方法！HTMLとjavascriptで簡単表示【コピペで超簡単】
ソースコード HTMLとCSSとJavascriptをご紹介しています。 このソースをコピーして貼り付けるとデモのようになります。 色やタイマーの配置などを変更したい場合はcssを書き換えてください。 <section class="timer"> タイムセール終了まで残り <div id="CDT"></div> </section> #CDT { width: 100%; text-align: center; font-size: 49px; font-weight: bold; color: #ffffff; font-family: 'Noto Sans JP', sans-serif;} #CDT01 { width: 100%; text-align: center; font-size: 49px; font-weight: bold; color: #ffffff; fo
【JavaScript】簡単に出来る！カウントダウンタイマーの作り方 | Web(ウェブ)の便利屋ララパルーザ
こんにちは、プログラマーの山本です。 今回はWebサイトに表示するカウントダウンタイマーをJavaScriptでサクッと作成しました。 「締め切りまで ◯日◯時間◯分◯秒」という表示にします。 簡単に作れるので、カウントダウンタイマーを設置したいとお考えの方は参考にしてください。 htmlでカウントダウンタイマーの設置箇所を追加する。 <div class="count-down-timer" id="count_down_timer"></div> JavaScriptでカウントダウンタイマーを実装する。 タイマーに必要な定数を定義する。 //カウントダウンの終了日時を指定 const EndTime = new Date("2025/12/31 23:59:59"); //タイマーを表示する要素 const output = document.getElementById("count
CSSとJavaScriptで新年カウントダウンタイマーを実装する方法 | WebDev Tech
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新年カウントダウンタイマー</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="countdown"> <h1 class="countdown-title">Countdown to <span id="year" class="new-year"></span> </h1> <div class="time-container"> <p class="time">
なぜJavaScriptでテストコードを書くのか？
はじめに 第1回目の本稿は、実際にテストコードを書く前に、基本的な考え方である「なぜテストコードを書くのか？」を解説します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 頻繁な変化への対応 まずは、開発現場で多く行われている基本的な考え方を振り返り、テストコードがなぜ必要なのかを考えて行きたいと思います。 これまでのテストの考え方 まずは、一般的なウォータフォールモデルを例に考えてみましょう。通常ウォータフォールモデルでは、設計→実装→テストという順番で、作ったものを最後にテストします。最後にテストを行うというのは、言い換えると「品質を最後に担保する」と言えます。 また、最後にテストする場合は、通常テスト仕様書などを作成した上で必要なテストパターンを洗い出し、手動でテストを実施します。 変化への対応が求められている スタートアッ
JSONPで悩むある程度の人々へ
JSONPって、クロスドメインでデータをとってこれて、Web APIとかはこれで実装されているんでしょ。 なんとなくわかる気がするんだけど、自分で作ってみるとなんかうまく動かない。 あるいはその手前で、どういう風に実装していいかわからない。 とくに自分がAPIを提供する側になると、よけいよくわからない。 Wikipediaの解説なんか、わけがわからないよ。 こんな感じの方はいませんか。 というか、ちょっと前の自分はこんな感じでした。 いろんなサイトを調べまくって、ある程度わかってきた気がしますので、後のためにここに残しておきます。 ああ、あのころの自分に教えてあげたかった。 まずJSONって何さ？ JSONPにたどり着いた人はJSONのことは知っていると思いますから、簡単に。 こんな感じの「テキスト」のことですよね。 { "key1": "value1", "key2": "value2"
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
