トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript

Last-modified: 2012-02-29 (水) 16:50:09 (2279d)
Top / JavaScript

Debugツール

FireFox?

  • FireBug?
    もはや云わずもながな、定番JavaScriptデバッガ&Domビューア
    最近、無効の場合と有効時でJavaScriptの動作が違うんだよなぁ・・・・
  • Live HTTP Header
    http通信ヘッダが見れます
    コンテンツタイプや文字コード情報が、どう送信されているかはチェックが必要
  • HTML VALIDATOR
    HTML構文チェックツール http://users.skynet.be/mgueury/mozilla/

IE7

  • IEDeveloperToolBar?
    Microsoftが出しているFireBug?のラインデバッガ無し。
    DomでHTMLソースを見るで見れないJavaScriptで生成されたHTMLなどを見るのに便利
  • ieHTTPHeader
    IEでのhttp通信ヘッダが見れます
    FireFox?のLive HTTP HeaqderのIE版にたいなカンジ
  • CompanionJS
    JavaScriptのエラー箇所をライン表示してくれます。

IE8

デバッガを内臓

Opera

9.5からデバッガを内臓

Safari

OSX上だとWebKit?使えば出来るのかな?

Google Chrome

デバッガ内臓

jsファイル内でjsファイルをインクルード

function include(astrFile)
{
  var script = document.createElement('script');
  script.src = astrFile;
  script.type = 'text/javascript';
  script.defer = true;
  document.getElementsByTagName('head').item(0).appendChild(script);
}

http://migelnanai.blog.so-net.ne.jp/2007-04-26 のブログから拝借

JavaScriptでXMLHttpRequest?

XMLHttpRequest?オブジェクトの生成

Mozilla,IE7以降

var xmlhttp = new XMLHttpRequest();

IE

  • その1
    var xmlhttp = new ActiveXObject( "Msxml2.XMLHTTP" );
  • その2
    var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );

sendの結果で、ブラウザのキャッシュを回避する

IEだと2度目のsend結果は、ブラウザのキャッシュが使用され、
最新の結果が表示されないので送信するデータのヘッダにIf-Modified-Sinceを入れて常に古いデータと認識させてキャッシュを回避する。

※パラメータ部分に余分なパラメータを付け、パラメータ値を変えて回避する方法もあるが、ブラウザに、パラメータ値毎のキャッシュが溜まりまくるので推奨出来ない。

XmlHttpReq.open( "POST", "http://127.0.0.1/", true );
XmlHttpReq.setRequestHeader( "If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT" );
XmlHttpReq.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded;charset=UTF-8" );

XmlHttpReq.onreadystatechange = callback;
XmlHttpReq.send( "hoge=hogehoge&moge=mogemoge" );

HTML

IEのinnerHTMLでTABLEタグ(丸ごと限定?)を挿入する

IEはinnerHTMLでのTABLEタグの直接挿入が出来ないが
一手間かけると挿入出来たり

//テーブルタグの入れ物を用意
var oDiv = document.createElement('div');
oDiv.innerHTML = "<TABLE>省略</TABE>";
//テーブル挿入したい所のエレメント取得
oEle = document.getElementById("result");
//クリアしといてappendChildで挿入
oEle.innerHTML = "";
oEle.appendChild(oDiv);

JavaScriptでXSLT

WebKit?系のSafariは公式ページでサーポートしていない記述あるけど出来るみたい http://developer.apple.com/jp/internet/safari/faq.html

※以前Webkit系はJavaScriptでXMLをXSLTで変換出来ないと書いたケド出来る模様
下記のページで紹介されてました
http://musimusi.g.ribbon.to/diary/diary.html?id=20101202_1.xml

Android2.3の標準ブラウザではJavaScriptでのXML+XSLTはエラー出ます
iOSでは出来るのにナゼ?(iOS4より前は知らない)

JavaScriptなXslt

ajaxslt

xslt.js

XSLTオブジェクトの生成

Firefox

XMLとおんなし

var oXslt = document.implementation.createDocument( "", "", null );
oXslt.load("hogehoge.xslt");

Webkit系

var oHttpReq = new XMLHttpRequest();
oHttpReq.open( "GET", "hogehoge.xslt", false );
oHttpReq.send( null );
oXslt = oHttpReq.responseXML;

IE

いろいろあるでよ〜

  • その1(推奨)
    var oXslt = new ActiveXObject( "Msxml2.FreeThreadedDOMDocument" );
    oXslt.load("hogehoge.xslt");
  • その2
    oXslt = new ActiveXObject( "MSXML2.DOMDocument" );
    oXslt.load("hogehoge.xslt");

XSLTによるXMLデータ変換

Firefox & Opera & Webkit

//変換プロセッサ生成
var oXslProc = new XSLTProcessor();
//変換XSLTオブジェクトを設定
oXslProc.importStylesheet( oXslt );
//変換XMLを指定し変換
var fragment = oXslProc.transformToFragment( oXml, document );

IE

  • その1
    //変換後の入れ物生成
    var oDiv = document.createElement('div');
    //XMLオブジェクトにXLST指定して変換
    oDiv.innerHTML = oXml.transformNode( oXslt.documentElement );
  • その2
    var xslTemp = new ActiveXObject( "Msxml2.XSLTemplate" );
    xslTemp.stylesheet = oXslt;
    var oXslProc = xslTemp.createProcessor();
    oXslProc.input = oXml;					
    oXslProc.transform();
    var oDiv = document.createElement('div');
    oDiv.innerHTML = oXslProc.output;

XSLファイルヘッダでの注意

XMLのデータをXSLで変換する場合はoutputタグの各属性に気をつける事

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" omit-xml-declaration="no" />
  • outputタグ説明
    • method:text、htmlなどのフォーマット形式を指定
    • encoding:変換後の文字コード。
    • omit-xml-declaration:XML宣言タグを付けるか?部分的にHTML変換してJavaScriptなどでinnerHTMLするならnoなのかね?

XSLへのパラメータ渡し

  • XSLT
    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:param name="パラメータ名"/>
    </xsl:stylesheet>
  • JavaScript IE以外
    //XSLT生成
    var oXslt = document.implementation.createDocument( "", "", null );
    oXslt.load("hogehoge.xslt");
    
    //XSLTプロセッサ生成
    var oXsltProc = new XSLTProcessor();
    //変換XSLTオブジェクトを設定
    oXslProc.importStylesheet( oXslt );
    //パラメータ設定
    oXslProc.setParameter(null, "パラメータ名", 値 );
  • JavaScript IE
    //XSLT生成
    var oXslt = new ActiveXObject( "Msxml2.FreeThreadedDOMDocument" );
    oXslt.load("hogehoge.xslt");
    
    //XSLTプロセッサ生成
    var xslTemp = new ActiveXObject( "Msxml2.XSLTemplate" );
    xslTemp.stylesheet = oXslt;
    var oXslProc = xslTemp.createProcessor();
    
    //パラメータ設定
    oXslProc.addParameter( "パラメータ名", 値 );

それでも出来ない場合はXsltを直接イジる?!(DOMだし)

JavaScriptでXML

XMLオブジェクトの生成

Mozilla Webkit

var oXmlDom = document.implementation.createDocument( "", "", null );

IE

  • その1
    oXmlDom = new ActiveXObject( "MSXML2.DOMDocument" );
  • その2
    oXmlDom = new ActiveXObject("Microsoft.XMLDOM");

XMLHttpRequest?にてCGIのXMLを受け取る場合の注意

サーバから送信されるContent-Typeに注意する事。
IEはtext/xmlで受け取らないとresponseXMLでXMLを取得出来ない
(responseTextでテキストは取れる)

xmlで、loadにてXMLを読み込む場合の注意

下記のようななコードでxmlファイル取得要求する時の注意

xml.load( "http://hogehoge.com/hoge.php" );

ヘッダ情報でcharset情報の記述位置でブラウザによって処理出来る出来ないが在る
chartsetは必ず最後に記述するのをオススメ。
ただし、Webkit系はコレまた使用出来ない。

charsetが途中に設定されている

header("Content-Type: text/xml; charset=UTF-8; Cache_Control:no-cache ;Pragma: no-chache;");~
  • IE:読み込まない
  • Opera:9.5では読み込まなかった気がするが、10.5では読み込む
  • Firefox:3.0以降で読み込むのを確認

charset無し

header("Content-Type: text/xml; Cache_Control:no-cache ;Pragma: no-chache;");~
  • IE:読み込む
  • Opera:読み込まない
  • Firefox:読み込む

charsetが末尾に設定されている

header("Content-Type: text/xml; Cache_Control:no-cache ;Pragma: no-chache;  charset=UTF-8;");~
  • IE:読み込む
  • Opera:読み込む
  • Firefox:3.0以降で読み込むのを確認

Webkit系での代替え処理方法

Webkit系はloadでエラー出るので

var oHttpReq = document.implementation.createDocument( "", "", null );
oHttpReq.open( "GET", "http://hogehoge.com/hoge.php", false );
oHttpReq.send(null);

var oXml = oHttpReq.responseXML;

トラブル

IEでwindow.openをすると「インターフェイスがサポートされていません 」が出る

  • 原因として怪しいと思われる環境
    • IETesterを使っている。または使っていた。
  • 対応
    下記のコマンドを「ファイル名を指定して実行」か、コマンドプロンプトで行う。
    参考URL:http://support.microsoft.com/kb/180176/ja
    1. regsvr32 actxprxy.dll
    2. regsvr32 shdocvw.dll

リンク