JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.URL .domain .title でページのURL・ドメイン・ページタイトルを表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.URL .domain .title

JavaScriptの.URL .domain .title でページのURL・ドメイン・ページタイトルを表示

JavaScriptの.URL .domain .title でページのURL・ドメイン・ページタイトルを表示

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はこれだけです。

さいごに

いかがでしたでしょうか?

利用するケースはさほど多くないと思いますが、簡単なコードでいろんな情報を取得できるので、カスタマイズや応用させて使ってみてください。