metaObject.httpEquivプロパティ

投稿日: 2014年3月1日 作成者: alphasis

metaObject.httpEquivは、meta要素のhttpEquiv属性の値を取得、もしくは、設定するプロパティ。

meta要素のhttpEquiv属性を指定することで、meta要素はプラグマディレクティブとなる。内容は、content属性に指定する。

httpEquiv属性は、HTTPレスポンスヘッダをシミュレートしたいときに使う。

name属性を指定した場合、httpEquiv属性は指定しない。

構文

取得

var $httpEquiv = $metaElementReference.httpEquiv;

戻り値

meta要素のhttpEquiv属性の値。

設定

$metaElementReference.httpEquiv = "metaElementHttpEquiv";
metaElementHttpEquiv
指定例
  • content-type：文字エンコーディング。
  • default-style：優先スタイルシート。
  • refresh：時限リダイレクト。更新時間間隔。

サンプル

文字エンコーディングを変更：

優先スタイルシートを変更：

時限リダイレクトを変更：

  1. インラインフレーム内のドキュメントの１つ目のmeta要素の
    • httpEquiv属性の値：
    • content属性の値：
  2. インラインフレーム内のドキュメントの２つ目のmeta要素の
    • httpEquiv属性の値：
    • content属性の値：
  3. インラインフレーム内のドキュメントの３つ目のmeta要素の
    • httpEquiv属性の値：
    • content属性の値：

サンプルの動作について

  • 2014/01/20現在、Chromeでのみ動作確認。
  • 「文字エンコーディングを変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの１つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
  • 「優先スタイルシートを変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの２つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
  • 「時限リダイレクトを変更：」の右横の各ボタンをクリックすると、インラインフレーム内のドキュメントの３つ目のmeta要素のcontent属性値を、各ボタン上のテキストに変更する。
  • meta要素のhttpEquiv属性値とcontent属性値を下のリストに表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    getHttpEquiv();
    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 = 0; $i < $metaElementsReference.length; $i++ ){
        var $content = $metaElementsReference[$i].content;
        document.getElementById( "sampleOutputContent[" + $i + "]" ).innerHTML = $content;
    }
}
function getHttpEquiv() {
    var $iframeElementReference = document.getElementById( "sampleIFrame" );
    var $metaElementsReference = $iframeElementReference.contentDocument.getElementsByTagName( "meta" );
    for( var $i = 0; $i < $metaElementsReference.length; $i++ ){
        var $httpEquiv = $metaElementsReference[$i].httpEquiv;
        document.getElementById( "sampleOutput[" + $i + "]" ).innerHTML = $httpEquiv;
    }
}
</script>

HTML

<p>
    文字エンコーディングを変更：
    <button onclick="setContent(0,'text/html; charset=UTF-8');">text/html; charset=UTF-8</button>
    <button onclick="setContent(0,'text/html; charset=Shift_JIS');">text/html; charset=Shift_JIS</button>
</p>
<p>
    優先スタイルシートを変更：
    <button onclick="setContent(1,'優先スタイルシート');">優先スタイルシート</button>
    <button onclick="setContent(1,'代替スタイルシート');">代替スタイルシート</button>
</p>
<p>
    時限リダイレクトを変更：
    <button onclick="setContent(2,5);">5</button>
    <button onclick="setContent(2,30);">30</button>
    <button onclick="setContent(2,60);">60</button>
</p>
<ol>
    <li>インラインフレーム内のドキュメントの１つ目のmeta要素の
        <ul>
            <li>httpEquiv属性の値：<span id="sampleOutput[0]"></span></li>
            <li>content属性の値：<span id="sampleOutputContent[0]"></span></li>
        </ul>
    </li>
    <li>インラインフレーム内のドキュメントの２つ目のmeta要素の
        <ul>
            <li>httpEquiv属性の値：<span id="sampleOutput[1]"></span></li>
            <li>content属性の値：<span id="sampleOutputContent[1]"></span></li>
        </ul>
    </li>
    <li>インラインフレーム内のドキュメントの３つ目のmeta要素の
        <ul>
            <li>httpEquiv属性の値：<span id="sampleOutput[2]"></span></li>
            <li>content属性の値：<span id="sampleOutputContent[2]"></span></li>
        </ul>
    </li>
</ol>
<iframe id="sampleIFrame" src="http://alphasis.info/wp-content/uploads/2014/02/sampleMeta-httpEquiv.html" width="300px" height="100px">
    <p>お使いのブラウザはiframeに対応していません。</p>
</iframe>

インラインフレーム内のHTMLドキュメント

<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="default-style" content="優先スタイルシート">
    <meta http-equiv="refresh" content="60">
    <link rel="stylesheet" type="text/css" href="http://alphasis.info/wp-content/uploads/2014/02/sampleMeta-httpEquiv.css" title="優先スタイルシート">
    <link rel="stylesheet alternate" type="text/css" href="http://alphasis.info/wp-content/uploads/2014/02/sampleMeta-httpEquiv-blue.css" title="代替スタイルシート">
</head>
<body>

<p>【インラインフレーム内ドキュメント】</p>
<p>このテキストは、インラインフレーム内のテキスト。</p>

</body>
</html>

スポンサード リンク

カテゴリー: DOM, JavaScript, Metaオブジェクト, リファレンス パーマリンク