我正在开发一个仅限IE6的内部遗留网站。 IE8 / 9因使用XML Data Island特定脚本而失败。目标是修改IE9上可以查看的站点。其他浏览器不是问题。
有数千页及以上的100多个JS文件,所以这里的另一个目标不是重写所有内容,而是要修复我们为IE9启用网站的能力。
我不完全确定我这样做是正确的,但以下是典型页面布局的示例。我把它浓缩成一个小测试,以证明什么是有效的,什么是无效的。
作品
不工作
重现问题的步骤
示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Data Islands</title>
<xml id="ResultsIsland">
<result>
<msg>Initial Message</msg>
</result>
</xml>
<script type="text/javascript">
function modifyDataIsland() {
var dataIsland = document.getElementById("ResultsIsland");
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(dataIsland.innerHTML);
var xmlRoot = xmlDoc.documentElement;
xmlRoot.getElementsByTagName("msg")[0].text = new Date();
dataIsland.innerHTML = xmlDoc.xml;
alert("msg element updated to: " + xmlRoot.getElementsByTagName("msg")[0].text);
}
function viewMessage() {
var d = document.getElementById("Message");
var dataIsland = document.getElementById("ResultsIsland");
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(dataIsland.innerHTML);
d.innerHTML = xmlDoc.getElementsByTagName("msg")[0].text;
}
</script>
</head>
<body style="margin: 100px;">
<div style="margin: 10px;">
<button onclick="viewMessage();">view message</button>
message is: <span id="Message"/>
</div>
<table datasrc="#ResultsIsland" style="margin: 10px;">
<tr>
<td>
message: <input type="text" datafld="msg" />
</td>
</tr>
</table>
<table datasrc="#ResultsIsland" style="margin: 10px;">
<tr>
<td>
message: <input type="text" datafld="msg" />
</td>
</tr>
</table>
<div style="margin: 10px;">
<button onclick="modifyDataIsland();">modify message</button>
</div>
</body>
</html>
问题:是否可以使用IE9更新XML数据岛,以便更改反映在嵌入式XML和绑定数据字段中?
答案 0 :(得分:1)
经过各种测试,我发现迫使IE9进入怪癖模式可以让IE9与XML Data Islands很好地配合。这允许您为XML Data Islands使用IE5 / 6脚本。
以下是在IE9中运行的修订示例:
<!--
This comment and the following DocType forces IE9
into quirks mode which is needed for the XML Data Islands
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Data Islands</title>
<xml id="ResultsIsland">
<result>
<msg>Message</msg>
</result>
</xml>
<script type="text/javascript">
function modifyDataIsland() {
var xml = document.all("ResultsIsland").XMLDocument;
xml.getElementsByTagName("msg")[0].text = new Date();
alert('msg element updated to: ' + xml.getElementsByTagName("msg")[0].text);
}
function viewMessage() {
var xml = document.all("ResultsIsland").XMLDocument;
document.getElementById("Message").innerHTML = xml.getElementsByTagName("msg")[0].text;
}
</script>
</head>
<body style="margin: 100px;">
<p style="margin: 30px 10px;">
Document is in
<strong>
<script type="text/javascript">document.write(document.compatMode)</script>
</strong> mode.
</p>
<div style="margin: 10px;">
<button onclick="viewMessage();">view message</button>
message is: <span id="Message"></span>
</div>
<table datasrc="#ResultsIsland" style="margin: 10px;">
<tr>
<td>
message: <input type="text" datafld="msg"/>
</td>
</tr>
</table>
<table datasrc="#ResultsIsland" style="margin: 10px;">
<tr>
<td>
message: <input type="text" datafld="msg"/>
</td>
</tr>
</table>
<div style="margin: 10px;">
<button onclick="modifyDataIsland();">modify message</button>
</div>
</body>
</html>