metaObject.nameは、meta要素のname属性の値を取得、もしくは、設定するプロパティ。
meta要素のname属性には、メタデータ名を指定できる。内容は、content属性に指定する。
構文
取得
var $name = $metaElementReference.name;
戻り値
meta要素のname属性の値。メタデータ名。
設定
$metaElementReference.name = "metaElementName";
- metaElementName
- メタデータ名(meta要素のname属性値)を指定。
- 例
- application-name:ウェブアプリケーション名。
- author:作者名。
- description:概要。
- generator:生成に使ったソフトウェア。
- keywords:関連キーワード。
サンプル
2つ目のmeta要素のname属性の値を変更:
3つ目のmeta要素のname属性の値を変更:
4つ目のmeta要素のname属性の値を変更:
インラインフレーム内のドキュメントの2つ目のmeta要素のname属性の値:
インラインフレーム内のドキュメントの3つ目のmeta要素のname属性の値:
インラインフレーム内のドキュメントの4つ目のmeta要素のname属性の値:
サンプルの動作について
- 「2つ目のmeta要素のname属性の値を変更:」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの2つ目のmeta要素のname属性値を、各ボタン上のテキストに変更する。
- 「3つ目のmeta要素のname属性の値を変更:」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの3つ目のmeta要素のname属性値を、各ボタン上のテキストに変更する。
- 「4つ目のmeta要素のname属性の値を変更:」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの4つ目のmeta要素のname属性値を、各ボタン上のテキストに変更する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
getName();
}
function setName( $i, $name ) {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
$metaElementsReference[$i].name = $name;
getName();
}
function getName() {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
for( var $i = 1; $i < $metaElementsReference.length; $i++ ){
var $name = $metaElementsReference[$i].name;
document.getElementById( "sampleOutput[" + $i + "]" ).innerHTML = $name;
}
}
</script>
window.onload = function () {
getName();
}
function setName( $i, $name ) {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
$metaElementsReference[$i].name = $name;
getName();
}
function getName() {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
for( var $i = 1; $i < $metaElementsReference.length; $i++ ){
var $name = $metaElementsReference[$i].name;
document.getElementById( "sampleOutput[" + $i + "]" ).innerHTML = $name;
}
}
</script>
HTML
<p>
2つ目のmeta要素のname属性の値を変更:
<button onclick="setName(1,'description');">description</button>
<button onclick="setName(1,'keywords');">keywords</button>
<button onclick="setName(1,'author');">author</button>
</p>
<p>
3つ目のmeta要素のname属性の値を変更:
<button onclick="setName(2,'description');">description</button>
<button onclick="setName(2,'keywords');">keywords</button>
<button onclick="setName(2,'author');">author</button>
</p>
<p>
4つ目のmeta要素のname属性の値を変更:
<button onclick="setName(3,'description');">description</button>
<button onclick="setName(3,'keywords');">keywords</button>
<button onclick="setName(3,'author');">author</button>
</p>
<p>インラインフレーム内のドキュメントの2つ目のmeta要素のname属性の値:<span id="sampleOutput[1]"></span></p>
<p>インラインフレーム内のドキュメントの3つ目のmeta要素のname属性の値:<span id="sampleOutput[2]"></span></p>
<p>インラインフレーム内のドキュメントの4つ目のmeta要素のname属性の値:<span id="sampleOutput[3]"></span></p>
<iframe id="sampleIFrame" src="http://alphasis.info/wp-content/uploads/2014/02/sampleMeta.html" width="300px" height="100px">
<p>お使いのブラウザはiframeに対応していません。</p>
</iframe>
2つ目のmeta要素のname属性の値を変更:
<button onclick="setName(1,'description');">description</button>
<button onclick="setName(1,'keywords');">keywords</button>
<button onclick="setName(1,'author');">author</button>
</p>
<p>
3つ目のmeta要素のname属性の値を変更:
<button onclick="setName(2,'description');">description</button>
<button onclick="setName(2,'keywords');">keywords</button>
<button onclick="setName(2,'author');">author</button>
</p>
<p>
4つ目のmeta要素のname属性の値を変更:
<button onclick="setName(3,'description');">description</button>
<button onclick="setName(3,'keywords');">keywords</button>
<button onclick="setName(3,'author');">author</button>
</p>
<p>インラインフレーム内のドキュメントの2つ目のmeta要素のname属性の値:<span id="sampleOutput[1]"></span></p>
<p>インラインフレーム内のドキュメントの3つ目のmeta要素のname属性の値:<span id="sampleOutput[2]"></span></p>
<p>インラインフレーム内のドキュメントの4つ目のmeta要素のname属性の値:<span id="sampleOutput[3]"></span></p>
<iframe id="sampleIFrame" src="http://alphasis.info/wp-content/uploads/2014/02/sampleMeta.html" width="300px" height="100px">
<p>お使いのブラウザはiframeに対応していません。</p>
</iframe>
インラインフレーム内のHTMLドキュメント
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="description" content="概要。">
<meta name="keywords" content="キーワード,サンプル">
<meta name="author" content="著者">
</head>
<body style="background-color: red; color: white;">
<p>【インラインフレーム内ドキュメント】</p>
<p>このテキストは、インラインフレーム内のテキスト。</p>
</body>
</html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="概要。">
<meta name="keywords" content="キーワード,サンプル">
<meta name="author" content="著者">
</head>
<body style="background-color: red; color: white;">
<p>【インラインフレーム内ドキュメント】</p>
<p>このテキストは、インラインフレーム内のテキスト。</p>
</body>
</html>