-
Notifications
You must be signed in to change notification settings - Fork 0
/
Example8-Include XML in HTML.html
101 lines (76 loc) · 4.43 KB
/
Example8-Include XML in HTML.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta encoding="utf-8">
<title>XSLT</title>
</head>
<body>
<div id="xml" style="display:none">
<extract>
<milestone n="1" unit="section" />
<milestone unit="para" />Thus the <name type="pers">Mermnadae</name> robbed the <name type="pers">Heraclidae</name> of the sovereignty and took it for themselves. Having gotten it, <name type="pers">Gyges</name> sent many offerings to <name key="perseus,Delphi" type="place" reg="Delphi [22.5167,38.4917] (Perseus) "><placeName key="perseus,Delphi" authname="perseus,Delphi">Delphi</placeName></name>: there are very many silver offerings of his there; and besides the silver, he dedicated a hoard of gold, among which six golden bowls are the offerings especially worthy of mention.
<milestone n="2" unit="section" />These weigh thirty talents<note anchored="yes" resp="ed" place="unspecified">The “Attic” talent had a weight of about 58 lbs. avoirdupois, the “<name type="ethnic">Aeginetan</name>” of about 82.</note> and stand in the treasury<note anchored="yes" resp="ed" place="unspecified">Many <name type="ethnic">Greek</name> states had special “treasuries” allotted to them in the temple precincts at <name key="perseus,Delphi" type="place" reg="Delphi [22.5167,38.4917] (Perseus) "><placeName key="perseus,Delphi" authname="perseus,Delphi">Delphi</placeName></name>, in which their offerings were deposited.</note> of the <name type="ethnic">Corinthians</name>; although in truth it is not the treasury of the <name type="ethnic">Corinthian</name> people but of <name type="pers">Cypselus</name> son of <name type="pers">Eetion</name>. This <name type="pers">Gyges</name> then was the first foreigner whom we know who placed offerings at <name key="perseus,Delphi" type="place" reg="Delphi [22.5167,38.4917] (Perseus) "><placeName key="perseus,Delphi" authname="perseus,Delphi">Delphi</placeName></name> after the king of <name key="tgn,7002613" type="place" reg="Phrygia (region (general)), Turkey, Asia "><placeName key="tgn,7002613" authname="tgn,7002613">Phrygia</placeName></name>, <name type="pers">Midas</name> son of <name type="pers">Gordias</name>.
<milestone n="3" unit="section" />For <name type="pers">Midas</name> too made an offering: namely, the royal seat on which he sat to give judgment, and a marvellous seat it is. It is set in the same place as the bowls of <name type="pers">Gyges</name>. This gold and the silver offered by <name type="pers">Gyges</name> is called by the <name type="ethnic">Delphians</name> “<name type="ethnic">Gygian</name>” after its dedicator.
</extract>
</div>
<div id="xslt" style="display:none">
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h1>Histories</h1>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="name">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
</xsl:stylesheet>
</div>
<div id="example"></div>
<script type="text/javascript">
//Run when document has loaded
(function(){
function documentLoaded(){
if(!('fetch' in window)) {
console.log('Fetch does not appear to be available in this browser. Please try another.');
return;
}
if(!('XSLTProcessor' in window)) {
console.log('XSLTProcessor does not appear to be available in this browser. Please try another.');
return;
}
if(!('DOMParser' in window)){
console.log('DOMParser does not appear to be available in this browser. Please try another.');
return;
}
const xsltProcessor = new XSLTProcessor();
const parser = new DOMParser();
const serializer = new XMLSerializer();
//these need to be let since we will update values
let xsltDoc, xmlDoc, str = null;
//XSLT
const xslt = document.getElementById("xslt");
if(xslt){
xsltDoc = document.implementation.createDocument(null, "", null);
xsltDoc.appendChild(xslt.firstElementChild);
console.log(xsltDoc.firstElementChild.ownerDocument);
console.log(typeof xsltDoc);
}
//XML
const xml = document.getElementById("xml");
if(xml){
xmlDoc = document.implementation.createDocument(null, "", null);
xmlDoc.appendChild(xml.firstElementChild);
console.log(xmlDoc.firstElementChild.ownerDocument);
}
//XSLT Processors and import XSLT
xsltProcessor.importStylesheet(xsltDoc);
//now we can run the transformation and save to fragment
const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
document.getElementById("example").appendChild(fragment);
}
window.addEventListener("load", documentLoaded, false);
})();
</script>
</body>
</html>