JavaScriptのコードを使って、ページのURL・ドメイン・ページタイトルの3つを取得して表示させます。
かかかず
meta タグに出力させる場合などで使えそうなスニペットです。
少し用途が限られそうなコードですが、参考にしてみてください。
.URL .domain .title
JavaScriptの.URL＝ページのURL・ .domain＝ドメイン・.title＝ページタイトル のプロパティで、それぞれの文字列を取得します。
// URLを取得
var a = document.URL;
// ドメインを取得
var b = document.domain;
// タイトルを取得
var c = document.title;これらのプロパティで取得した文書の文字列を返します。
ページのURL・ドメイン・ページタイトルを表示したサンプル
早速サンプルです。
以下は、.URL .domain .title のプロパティで取得した文字列を表示させたサンプルです。
かかかず
何かの操作で表示が変わる等々はない、シンプルな作りのサンプルです。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、各id名を付与した3つの div タグで、中身は空の状態です。
<div id="url"></div>
<div id="domain"></div>
<div id="pageTitle"></div>JavaScript
JavaScriptは、はじめの方で「URL」「ドメイン」「ページタイトル」の3つを取得して、各idを持つ div タグに .innerHTML で取得した文字列を入れて表示させます。
// URLを取得
var a = document.URL;
// ドメインを取得
var b = document.domain;
// タイトルを取得
var c = document.title;
url.innerHTML = '<span>URL</span>' + a;
console.log(a)
domain.innerHTML = '<span>ドメイン</span>' + b;
console.log(b)
pageTitle.innerHTML = '<span>タイトル</span>' + c;
console.log(c).innerHTML で設定する時に、HTMLにはなかった span タグを記述して表示させます。
CSS
CSSは、div タグを「flexbox」でレイアウトを整え、span タグは各見出しの見た目を整える記述です。
div {
display: flex;
justify-content: flex-start;
align-items: baseline;
}
div span {
background: #545454;
color: #FFF;
font-size: 0.8rem;
border-radius: 2px;
margin-right: 10px;
padding: 0 10px;
letter-spacing: 0.04rem;
min-width: 80px;
text-align: center;
}かかかず
CSSはこれだけです。
さいごに
いかがでしたでしょうか？
利用するケースはさほど多くないと思いますが、簡単なコードでいろんな情報を取得できるので、カスタマイズや応用させて使ってみてください。
![JavaScriptのライブラリQRious.jsで任意の文字列をQRコードで出力 [canvasとpngファイルを出力]](https://dubdesign.net/wp-content/uploads/2022/08/qrcode-1.svg)
