{"id":407,"date":"2022-03-06T20:57:00","date_gmt":"2022-03-06T11:57:00","guid":{"rendered":"http:\/\/160.251.208.217\/?p=407"},"modified":"2022-11-19T19:43:29","modified_gmt":"2022-11-19T10:43:29","slug":"xslt-edge","status":"publish","type":"post","link":"https:\/\/it-dxblog.com\/blog\/xslt-edge\/","title":{"rendered":"\u3010JavaScript\u3011Edge\u3084Chrome\u3067\u306eXSL\u5909\u63db"},"content":{"rendered":"\n

\u3060\u3044\u3076\u524d\u306bJavaScript<\/strong>\u3067\u3064\u304f\u3063\u305f\u300cXML\u3092\u8aad\u307f\u8fbc\u307f\u3001XSL\u3067\u5909\u63db<\/strong>\u3057\u3066IE<\/strong>\u3067\u8868\u793a\u3059\u308b\u30b7\u30b9\u30c6\u30e0\u300d<\/p>\n\n\n\n

\"\u304a\u5ba2\u3055\u3093\"
\u304a\u5ba2\u3055\u3093<\/div><\/div>
\n

4\u6708\u304b\u3089IE\u4f7f\u3048\u306a\u304f\u306a\u308b\u304b\u3089
Edge\u306b\u306a\u308b\u304b\u3089<\/p>\n<\/div><\/div><\/div><\/div>\n\n\n\n

\"\u3072\u308d\u3074\u3088\"
\u3072\u308d\u3074\u3088<\/div><\/div>
\n

\u3042\u308c\u2026<\/p>\n\n\n\n

Edge\u3067\u52d5\u304b\u306a\u3044\u3001\u4f55\u3082\u8868\u793a\u3055\u308c\u306a\u3044<\/p>\n<\/div><\/div><\/div><\/div>\n\n\n\n

\u30fb\u30fb\u30fb
\u3068\u3044\u3046\u3053\u3068\u3067\u6025\u304d\u3087\u30b7\u30b9\u30c6\u30e0\u6539\u4fee\u3092\u3059\u308b\u3053\u3068\u306b\u3002
ActiveXObject<\/strong>\u3092\u4f7f\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001Edge\u3084Chrome\u3060\u3068\u52d5\u304b\u306a\u3044\u3088\u3046\u3067\u3057\u305f\u3002
\u5225\u306e\u65b9\u6cd5\u304c\u5206\u304b\u3063\u305f\u306e\u3067\u3001JavaScript\u3067XSL\u5909\u63db\u3059\u308b\u3068\u3053\u308d\u3092\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\n\n\n\n

\n
\n

\u524d\u63d0\u6761\u4ef6<\/span><\/span><\/h2>\n\n\n\n

\u30d5\u30a1\u30a4\u30eb\u4e00\u5f0f<\/strong>\uff08HTML\u3001XML\u3001XSL\uff09\u306fWeb\u30b5\u30fc\u30d0\u30fc<\/strong>\u4e0a\u306b\u4fdd\u7ba1
\u203b\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3060\u3068\u52d5\u4f5c\u3057\u306a\u3044\u306e\u3067\u6ce8\u610f<\/span><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

\u6e96\u5099\uff11\uff09XML\u306e\u30b5\u30f3\u30d7\u30eb<\/span><\/span><\/h2>\n\n\n\n

\u91ce\u7403\u306e\u9078\u624b\u540d\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u308bXML\uff08team.xml<\/strong>\uff09\u3067\u3059\u3002<\/p>\n\n\n\n

<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n<team>\n  <name>\u30aa\u30ea\u30c3\u30af\u30b9\u30fb\u30d0\u30c3\u30d5\u30a1\u30ed\u30fc\u30ba<\/name>\n  <players>\n    <player>\n      <no>18<\/no>\n      <position>\u6295\u624b<\/position>\n      <name>yamamoto<\/name>\n    <\/player>\n    <player>\n      <no>7<\/no>\n      <position>\u5916\u91ce\u624b<\/position>\n      <name>yoshida<\/name>\n    <\/player>\n  <\/players>\n<\/team><\/code><\/pre><\/div>\n<\/div>\n\n\n\n
\n
\u6e96\u5099\uff12\uff09XSL\u306e\u30b5\u30f3\u30d7\u30eb<\/span><\/span><\/h2>\n\n\n\n
\u5909\u63db\u7528\u306eXSL\uff08team.xsl<\/strong>\uff09\u3067\u3059\u3002<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<xsl:stylesheet xmlns:xsl=\"http:\/\/www.w3.org\/1999\/XSL\/Transform\" version=\"1.0\">\n  <xsl:output method=\"html\" encoding=\"utf-8\"\/>\n\n  <xsl:template match=\"\/\">\n    <h3><xsl:value-of select=\"name\"\/><\/h3>\n    <table>\n      <tr>\n        <th>\u80cc\u756a\u53f7<\/th>\n        <th>\u30dd\u30b8\u30b7\u30e7\u30f3<\/th>\n        <th>\u540d\u524d<\/th>\n      <\/tr>\n      <xsl:for-each select=\".\/team\/players\/player\">\n        <tr>\n          <td><xsl:value-of select=\"no\"\/><\/td>\n          <td><xsl:value-of select=\"position\"\/><\/td>\n          <td><xsl:value-of select=\"name\"\/><\/td>\n        <\/tr>\n      <\/xsl:for-each>\n    <\/table>\n  <\/xsl:template>\n\n<\/xsl:stylesheet><\/code><\/pre><\/div>\n<\/div>\n\n\n\n
\n
\u4eca\u307e\u3067\u306e\u30b3\u30fc\u30c9\uff08ActiveXObject<\/strong>\u3092\u4f7f\u7528\u3000\u203bIE\u306e\u307f\u52d5\u4f5c\uff09<\/span><\/span><\/h2>\n\n\n\n
HTML\u3068\u540c\u3058\u968e\u5c64\u306b\u3042\u308bXML\uff08team.xml\uff09\u3068XSL\uff08team.xsl\uff09\u3092\u8aad\u307f\u8fbc\u307f\u3001XSL\u5909\u63db\u3057\u3066\u8868\u793a\u3057\u307e\u3059\u3002
\u203b\u81ea\u4f5c\u95a2\u6570\u306f\u3001\u95a2\u6570\u540d\u3092\u300cmy_\u300d\u304b\u3089\u59cb\u3081\u3066\u3042\u308a\u307e\u3059<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n    <head>\n        <script>\n            \/\/ onload\u6642\u306b\u5b9f\u884c\n            function my_onLoad(){\n                const objXml = my_loadXML('.\/team.xml');\n                const objXsl = my_loadXML('.\/team.xsl');\n                \/\/ XSL\u3067\u5909\u63db\uff06\u8868\u793a\n                document.getElementById(\"example\").innerHTML = objXml.transformNode(objXsl);\n            }\n            \n            \/\/ XML\u3092\u8aad\u307f\u8fbc\u3080\n            \/\/ path : \u8aad\u307f\u8fbc\u3080XML\u306e\u30d1\u30b9\n            function my_loadXML(path){\n                let objXml = new ActiveXObject('Microsoft.XMLDOM');\n                objXml.async = false;\n\t            objXml.load(path);\n\t            return objXml;\n            }\n        <\/script>\n\n        <style>\n            th{\n                border: solid 1px white;\n                background-color: silver;\n                text-align: center;\n                padding: 2px 15px;\n            }\n            td{\n                padding: 2px 15px;\n            }\n        <\/style>\n        <\/head>\n\n    <body onload='my_onLoad()'>\n        <div id='example'>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre><\/div>\n<\/div>\n\n\n\n
\n
\u5909\u66f4\u3057\u305f\u30b3\u30fc\u30c9\uff08XMLHttpRequest\u3092\u4f7f\u7528\u3000\u203bEdge\u3084Chrome\u3067\u52d5\u4f5c\uff09<\/span><\/span><\/h2>\n\n\n\n
script\u30bf\u30b0\u5185\u3060\u3051\u5909\u66f4\u304c\u3042\u308a\u307e\u3059\u3002
\u203b\u81ea\u4f5c\u95a2\u6570\u306f\u3001\u95a2\u6570\u540d\u3092\u300cmy_\u300d\u304b\u3089\u59cb\u3081\u3066\u3042\u308a\u307e\u3059<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html>\n    <head>\n\n        <script>\n\n            \/\/ onload\u6642\u306b\u5b9f\u884c\n            function my_onLoad(){\n                const objXml = my_loadXML('.\/team.xml');\n                const objXsl = my_loadXML('.\/team.xsl');\n                \/\/ XSL\u3092XSLTProcessor\u306b\u8a2d\u5b9a\n                let objXsltProcessor = new XSLTProcessor();\n                objXsltProcessor.importStylesheet(objXsl);\n                \/\/ XSL\u3067\u5909\u63db\uff06\u8868\u793a\n                let eleResult = objXsltProcessor.transformToFragment(objXml, document);\n                document.getElementById(\"example\").appendChild(eleResult);\n            }\n\n            \/\/ XML\u3092\u8aad\u307f\u8fbc\u3080\n            \/\/ path : \u8aad\u307f\u8fbc\u3080XML\u306e\u30d1\u30b9\n            function my_loadXML(path){\n                let objXml = new XMLHttpRequest();\n                objXml.open('GET', path, false);\n                objXml.send('');\n                return objXml.responseXML;\n            }\n        <\/script>\n    <\/head>\n    \n    <style>\n        th{\n            border: solid 1px white;\n            background-color: silver;\n            text-align: center;\n            padding: 2px 15px;\n        }\n        td{\n            padding: 2px 15px;\n        }\n    <\/style>\n\n    <body onload='my_onLoad()'>\n        <div id='example'>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
XSL\u5909\u63db\u304c\u6210\u529f\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u305f\u3060\u3057\u3001\u3053\u3061\u3089\u306e\u65b9\u6cd5\u306fIE\u3060\u3068\u3046\u307e\u304f\u8868\u793a\u3055\u308c\u307e\u305b\u3093<\/span><\/strong>\u3002
IE\u3068Edge\u4e21\u65b9\u306b\u5bfe\u5fdc\u3059\u308b\u65b9\u6cd5\u306f\u3053\u3061\u3089<\/a>\u306e\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u3060\u3044\u3076\u524d\u306bJavaScript\u3067\u3064\u304f\u3063\u305f\u300cXML\u3092\u8aad\u307f\u8fbc\u307f\u3001XSL\u3067\u5909\u63db\u3057\u3066IE\u3067\u8868\u793a\u3059\u308b\u30b7\u30b9\u30c6\u30e0\u300d \u30fb\u30fb\u30fb\u3068\u3044\u3046\u3053\u3068\u3067\u6025\u304d\u3087\u30b7\u30b9\u30c6\u30e0\u6539\u4fee\u3092\u3059\u308b\u3053\u3068\u306b\u3002ActiveXObject\u3092\u4f7f\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001Edge\u3084Chrom … <\/p>\n","protected":false},"author":1,"featured_media":2099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[8],"tags":[32],"class_list":["post-407","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","tag-xml","entry"],"_links":{"self":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":5,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":2100,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/407\/revisions\/2100"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media\/2099"}],"wp:attachment":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/tags?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}