metaObject.contentは、meta要素のcontent属性の値を取得、もしくは、設定するプロパティ。
meta要素のcontent属性には、メタデータの内容を指定できる。メタデータ名は、name属性に指定する。
構文
取得
var $content = $metaElementReference.content;
戻り値
meta要素のcontent属性の値。メタデータの内容。
設定
$metaElementReference.content = "metaElementContent";
- metaElementContent
- メタデータの内容（meta要素のcontent属性値）を指定。
サンプル
２つ目のmeta要素のcontent属性の値を変更：
３つ目のmeta要素のcontent属性の値を変更：
４つ目のmeta要素のcontent属性の値を変更：
インラインフレーム内のドキュメントの２つ目のmeta要素のcontent属性の値：
インラインフレーム内のドキュメントの３つ目のmeta要素のcontent属性の値：
インラインフレーム内のドキュメントの４つ目のmeta要素のcontent属性の値：
サンプルの動作について
- 「２つ目のmeta要素のcontent属性の値を変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの２つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
- 「３つ目のmeta要素のcontent属性の値を変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの３つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
- 「４つ目のmeta要素のcontent属性の値を変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの４つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
getContent();
}
function setContent( $i, $content ) {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
$metaElementsReference[$i].content = $content;
getContent();
}
function getContent() {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
for( var $i = 1; $i < $metaElementsReference.length; $i++ ){
var $content = $metaElementsReference[$i].content;
document.getElementById( "sampleOutput[" + $i + "]" ).innerHTML = $content;
}
}
</script>
window.onload = function () {
getContent();
}
function setContent( $i, $content ) {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
$metaElementsReference[$i].content = $content;
getContent();
}
function getContent() {
var $iframeElementReference = document.getElementById( "sampleIFrame" );
var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
for( var $i = 1; $i < $metaElementsReference.length; $i++ ){
var $content = $metaElementsReference[$i].content;
document.getElementById( "sampleOutput[" + $i + "]" ).innerHTML = $content;
}
}
</script>
HTML
<p>
２つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(1,'概要。');">概要。</button>
<button onclick="setContent(1,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(1,'著者');">著者</button>
</p>
<p>
３つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(2,'概要。');">概要。</button>
<button onclick="setContent(2,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(2,'著者');">著者</button>
</p>
<p>
４つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(3,'概要。');">概要。</button>
<button onclick="setContent(3,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(3,'著者');">著者</button>
</p>
<p>インラインフレーム内のドキュメントの２つ目のmeta要素のcontent属性の値：<span id="sampleOutput[1]"></span></p>
<p>インラインフレーム内のドキュメントの３つ目のmeta要素のcontent属性の値：<span id="sampleOutput[2]"></span></p>
<p>インラインフレーム内のドキュメントの４つ目のmeta要素のcontent属性の値：<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>
２つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(1,'概要。');">概要。</button>
<button onclick="setContent(1,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(1,'著者');">著者</button>
</p>
<p>
３つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(2,'概要。');">概要。</button>
<button onclick="setContent(2,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(2,'著者');">著者</button>
</p>
<p>
４つ目のmeta要素のcontent属性の値を変更：
<button onclick="setContent(3,'概要。');">概要。</button>
<button onclick="setContent(3,'キーワード,サンプル');">キーワード,サンプル</button>
<button onclick="setContent(3,'著者');">著者</button>
</p>
<p>インラインフレーム内のドキュメントの２つ目のmeta要素のcontent属性の値：<span id="sampleOutput[1]"></span></p>
<p>インラインフレーム内のドキュメントの３つ目のmeta要素のcontent属性の値：<span id="sampleOutput[2]"></span></p>
<p>インラインフレーム内のドキュメントの４つ目のmeta要素のcontent属性の値：<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>