2011-10-08 21 views
1

我有一个在Safari浏览器中打开的main.xml。它由顶部指示的XSL文件处理得很好。Safari不处理来自XSL的HTML相同

我在生成的页面上有一些JavaScript应该采取第二个XML文件,并在href调用中使用给定的XSL进行处理。

第二个文件category.xml中的XSL似乎正常工作(如警报所示),但是当它作为子内容插入contentbody div时,它不会按预期呈现。

为了展示它的外观,我将第二个XSL过程的输出从alert对话框复制到最初呈现的contentbody div中。它看起来很好,就像一个ul元素应该产生的一样。当用XSL输出替换它时,这是非常错误的。

我真的很感谢这个帮助。为什么Safari(Mac OS Lion和iPad移动版Safari)不能正确渲染由JavaScript中执行的XSL插入的HTML输出?我应该如何解决这个问题?

谢谢,

马特。

main.xml中

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/xsl" href="main.xslt"?> 
<Feed xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> 
    <Status>OK</Status> 
    <Result> 
    <FeedDTO> 
     <Id>2286</Id> 
     <Name>Free to view</Name> 
     <IconName /> 
    </FeedDTO> 
    <FeedDTO> 
     <Id>2320</Id> 
     <Name>Latest news</Name> 
     <IconName /> 
    </FeedDTO> 
    <FeedDTO> 
     <Id>2249</Id> 
     <Name>Some reviews</Name> 
     <IconName /> 
    </FeedDTO> 
    <FeedDTO> 
     <Id>2250</Id> 
     <Name>The wrap</Name> 
     <IconName /> 
    </FeedDTO> 
    </Result> 
</Feed> 

main.xsl

<?xml version="1.0" encoding="iso-8859-1"?> 

<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:msws="http://tempuri.org/" 
    > 

    <xsl:template match="/"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <title>main</title> 
     <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      function transform(xmlfile,xslfile) 
      { 
       var xmlRequest = new XMLHttpRequest(); 
       xmlRequest.open("GET", xmlfile, false); 
       xmlRequest.send(null); 
       xml= xmlRequest.responseXML; 

       var xslRequest = new XMLHttpRequest(); 
       xslRequest.open("GET", xslfile, false); 
       xslRequest.send(null); 
       xsl = xslRequest.responseXML; 

       xsltProcessor = new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 

       resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").appendChild(resultDocument); 
      } 

      function go(xmlfile,xslfile) 
      { 
       var xmlRequest = new XMLHttpRequest(); 
       xmlRequest.open("GET", xmlfile, false); 
       xmlRequest.send(null); 
       xml= xmlRequest.responseXML; 

       var xslRequest = new XMLHttpRequest(); 
       xslRequest.open("GET", xslfile, false); 
       xslRequest.send(null); 
       xsl = xslRequest.responseXML; 
       xsltProcessor=new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 
       resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").innerHTML = ""; 
       document.getElementById("contentbody").appendChild(resultDocument); 
      } 

      function loadXMLDoc(dname) 
      { 
       if (window.XMLHttpRequest) 
       { 
        xhttp=new XMLHttpRequest(); 
       } 
       else 
       { 
        xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       xhttp.open("GET",dname,false); 
       xhttp.send(""); 
       return xhttp.responseXML; 
      } 

      function displayResult(xmlfile,xslfile) 
      { 
       xml=loadXMLDoc(xmlfile); 
       xsl=loadXMLDoc(xslfile); 
       xsltProcessor=new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 
       resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").innerHTML = ""; 
       document.getElementById("contentbody").appendChild(resultDocument); 
       alert(document.getElementById("contentbody").innerHTML); 
      } 
     </script> 
     </head> 
     <body> 
     <div id="main"> 
      <div id="menu"> 
      <div id="categorytitle"> 
       Categories 
      </div> 
      <ul id="categorybody"> 
       <xsl:for-each select="*/*/msws:FeedDTO"> 
       <xsl:if test="msws:Name != 'Free to view'"> 
        <li id="menuitem"> 
        <xsl:element name="a"> 
         <xsl:attribute name="href">javascript:void(0)</xsl:attribute> 
         <xsl:attribute name="onclick"> 
         displayResult('category.xml','category.xslt'); 
         </xsl:attribute> 
         <xsl:value-of select="substring(msws:Name, 1, 100)"/> 
        </xsl:element> 
        </li> 
       </xsl:if> 
       </xsl:for-each> 
      </ul> 
      </div> 
      <div id="content"> 
      <div id="contenttitle"> 
       Content 
      </div> 
      <div id="contentbody"><!-- CONTENT HERE COPIED FROM ALERT TO SHOW WHAT IT SHOULD LOOK LIKE --> 
       <div xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msws="http://tempuri.org/"><ul id="categorybody"><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The first title</a></li><li>07 Oct 2011</li><li>A nice long description 1.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The second title</a></li><li>06 Oct 2011</li><li>A nice long description 2.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The third title</a></li><li>06 Oct 2011</li><li>A nice long description 3.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The fourth title</a></li><li>05 Oct 2011</li><li>A nice long description 4.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The fifth title</a></li><li>04 Oct 2011</li><li>A nice long description 5.</li></ul></div> 
      </div> 
      </div> 
     </div> 
     </body> 
    </html> 
    </xsl:template> 

</xsl:stylesheet> 

的content.xml

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/xsl" href="category.xslt"?> 
<Data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> 
    <Status>OK</Status> 
    <Result> 
    <ResultItems> 
     <ArticleLiteDTO> 
     <Id>2913935</Id> 
     <Title>The first title</Title> 
     <Description>A nice long description 1.</Description> 
     <PublishedDate>2011-10-07T00:00:00</PublishedDate> 
     <SmallImageUrl /> 
     <LargeImageUrl /> 
     </ArticleLiteDTO> 
     <ArticleLiteDTO> 
     <Id>2913226</Id> 
     <Title>The second title</Title> 
     <Description>A nice long description 2.</Description> 
     <PublishedDate>2011-10-06T00:00:00</PublishedDate> 
     <SmallImageUrl /> 
     <LargeImageUrl /> 
     </ArticleLiteDTO> 
     <ArticleLiteDTO> 
     <Id>2913137</Id> 
     <Title>The third title</Title> 
     <Description>A nice long description 3.</Description> 
     <PublishedDate>2011-10-06T00:00:00</PublishedDate> 
     <SmallImageUrl /> 
     <LargeImageUrl /> 
     </ArticleLiteDTO> 
     <ArticleLiteDTO> 
     <Id>2912539</Id> 
     <Title>The fourth title</Title> 
     <Description>A nice long description 4.</Description> 
     <PublishedDate>2011-10-05T00:00:00</PublishedDate> 
     <SmallImageUrl /> 
     <LargeImageUrl /> 
     </ArticleLiteDTO> 
     <ArticleLiteDTO> 
     <Id>2911761</Id> 
     <Title>The fifth title</Title> 
     <Description>A nice long description 5.</Description> 
     <PublishedDate>2011-10-04T00:00:00</PublishedDate> 
     <SmallImageUrl /> 
     <LargeImageUrl /> 
     </ArticleLiteDTO> 
    </ResultItems> 
    </Result> 
</Data> 

content.xsl

<?xml version="1.0" encoding="iso-8859-1"?> 

<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:msws="http://tempuri.org/" 
    > 

    <xsl:template match="/"> 
<div> 
    <ul id="categorybody"> 
     <xsl:for-each select="*/*/*/msws:ArticleLiteDTO"> 
     <li id="categoryitem"> 

      <xsl:element name="a"> 
       <xsl:attribute name="href">javascript:void(0)</xsl:attribute> 
       <xsl:attribute name="onclick"> 
       XsltTransform('article.xml','article.xslt'); 
       </xsl:attribute> 
       <xsl:value-of select="msws:Title"/> 
      </xsl:element> 
      </li> 
      <li> 
      <xsl:call-template name="FormatDate"> 
       <xsl:with-param name="DateTimeParam" select="msws:PublishedDate" /> 
      </xsl:call-template> 
      </li> 
      <li> 
      <xsl:value-of select="msws:Description"/> 
      </li> 

     </xsl:for-each> 
    </ul> 
</div> 
    </xsl:template> 

    <xsl:template name="FormatDate"> 
    <!-- expecting datetime example: 2009-04-20T00:00:00 --> 
    <xsl:param name="DateTimeParam" /> 

    <!-- reformat date param to be easier to use --> 
    <xsl:variable name="DateTime"> 
     <xsl:value-of select="substring($DateTimeParam,1,10)"/> 
    </xsl:variable> 

    <!-- new date format January 20, 2007 --> 
    <xsl:variable name="year"> 
     <xsl:value-of select="substring-before($DateTime,'-')" /> 
    </xsl:variable> 
    <xsl:variable name="mo-temp"> 
     <xsl:value-of select="substring-after($DateTime,'-')" /> 
    </xsl:variable> 
    <xsl:variable name="mo"> 
     <xsl:value-of select="substring-before($mo-temp,'-')" /> 
    </xsl:variable> 
    <xsl:variable name="day"> 
     <xsl:value-of select="substring-after($mo-temp,'-')" /> 
    </xsl:variable> 

    <xsl:if test="(string-length($day) &lt; 2)"> 
     <xsl:value-of select="0"/> 
    </xsl:if> 
    <xsl:value-of select="$day"/> 
    <xsl:value-of select="' '"/> 
    <xsl:choose> 
     <xsl:when test="$mo = '1' or $mo = '01'">Jan</xsl:when> 
     <xsl:when test="$mo = '2' or $mo = '02'">Feb</xsl:when> 
     <xsl:when test="$mo = '3' or $mo = '03'">Mar</xsl:when> 
     <xsl:when test="$mo = '4' or $mo = '04'">Apr</xsl:when> 
     <xsl:when test="$mo = '5' or $mo = '05'">May</xsl:when> 
     <xsl:when test="$mo = '6' or $mo = '06'">Jun</xsl:when> 
     <xsl:when test="$mo = '7' or $mo = '07'">Jul</xsl:when> 
     <xsl:when test="$mo = '8' or $mo = '08'">Aug</xsl:when> 
     <xsl:when test="$mo = '9' or $mo = '09'">Sep</xsl:when> 
     <xsl:when test="$mo = '10'">Oct</xsl:when> 
     <xsl:when test="$mo = '11'">Nov</xsl:when> 
     <xsl:when test="$mo = '12'">Dec</xsl:when> 
    </xsl:choose> 
    <xsl:value-of select="' '"/> 
    <xsl:value-of select="$year"/> 
    </xsl:template> 

</xsl:stylesheet> 

回答

2

OK - 你有什么是命名空间的问题。这是使用content.xsl(格式化并缩写为可读性)将content.xml转换为DOM文档片段的输出。

<?xml version="1.0" encoding="UTF-8"?> 
<div 
    xmlns:msws="http://tempuri.org/" 
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <ul id="categorybody"> 
     <li id="categoryitem"> 
      <a href="javascript:void(0)" onclick=" 
       XsltTransform(&apos;article.xml&apos;,&apos;article.xslt&apos;); 
      ">The first title</a> 
     </li> 
     <li>07 Oct 2011</li> 
     <li>A nice long description 1.</li> 
     <li id="categoryitem"> 
     ... etc ... 
    </ul> 
</div> 

需要注意这一点的是,这是一种基于XML DOM片段 - 和元素在没有命名空间。所以,当你直接添加到你的DOM(就像你的问题所做的那样),Safari不会将这些元素视为HTML元素 - 因为它预计这些元素位于http://www.w3.org/1999/xhtml命名空间中。

当片段被序列化时,它将被转换成上面的XML。

当使用innerHTML解析XML时(如修改后的工作代码所做的那样),解析器会将XML视为HTML。根据HTML5解析实践,这些元素将自动放入http://www.w3.org/1999/xhtml命名空间中,并将被视为HTML,所以事情按预期工作。

您的解决方案存在一些问题。首先是将序列化为XML并解析为HTML是有风险的。例如,脚本元素可能被序列化为<script src="..." />,这可以作为XML而不是HTML。

其次,它需要一个会损害性能的序列化/解析循环。

解决这个问题可能很简单,只需将xmlns="http://www.w3.org/1999/xhtml"作为属性添加到content.xslxsl:stylsheet元素中,但我尚未在Safari中对其进行测试。

+0

嘿,非常感谢。我不确定我完全遵循,但我已经完成了你的建议,并且它似乎工作正常。事实上,表现不是问题。现在,什么是“该页面包含以下错误:”块插入输出的顶部。它抱怨未封闭的标签,但是由于这是用户在很多情况下输入的HTML(在CMS系统中无法控制),所以我需要抑制此消息。 –

0

好吧,我不明白为什么这会起作用,所以我真的很感激这里描述的是什么以及原始代码可能有什么问题,但是这里有一个main.xslt的新版本,它实际上它应该是什么。

main.xslt

<?xml version="1.0" encoding="iso-8859-1"?> 

<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
    xmlns:msws="http://tempuri.org/" 
    > 

    <xsl:template match="/"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <title>main</title> 
     <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      function transform(xmlfile,xslfile) 
      { 
       var xmlRequest = new XMLHttpRequest(); 
       xmlRequest.open("GET", xmlfile, false); 
       xmlRequest.send(null); 
       xml= xmlRequest.responseXML; 

       var xslRequest = new XMLHttpRequest(); 
       xslRequest.open("GET", xslfile, false); 
       xslRequest.send(null); 
       xsl = xslRequest.responseXML; 

       xsltProcessor = new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 

       resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").appendChild(resultDocument); 
      } 

      function go(xmlfile,xslfile) 
      { 
       var xmlRequest = new XMLHttpRequest(); 
       xmlRequest.open("GET", xmlfile, false); 
       xmlRequest.send(null); 
       xml= xmlRequest.responseXML; 

       var xslRequest = new XMLHttpRequest(); 
       xslRequest.open("GET", xslfile, false); 
       xslRequest.send(null); 
       xsl = xslRequest.responseXML; 
       xsltProcessor=new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 
       resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").innerHTML = ""; 
       document.getElementById("contentbody").appendChild(resultDocument); 
      } 

      function loadXMLDoc(dname) 
      { 
       xhttp=new XMLHttpRequest(); 
       xhttp.open("GET",dname,false); 
       xhttp.send(""); 
       return xhttp.responseXML; 
      } 

      function displayResult(xmlfile,xslfile) 
      { 
       xml=loadXMLDoc(xmlfile); 
       xsl=loadXMLDoc(xslfile); 
       xsltProcessor=new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 

var XmlDom = xsltProcessor.transformToDocument(xml); 
var serializer = new XMLSerializer(); 
var output = serializer.serializeToString(XmlDom.documentElement); 
//alert(output); 
//    resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("contentbody").innerHTML = ""; 
//    document.getElementById("contentbody").appendChild(resultDocument); 
document.getElementById("contentbody").innerHTML = output; 
//    alert(document.getElementById("contentbody").innerHTML); 
      } 
     </script> 
     </head> 
     <body> 
     <div id="main"> 
      <div id="menu"> 
      <div id="categorytitle"> 
       Categories 
      </div> 
      <ul id="categorybody"> 
       <xsl:for-each select="*/*/msws:FeedDTO"> 
       <xsl:if test="msws:Name != 'Free to view'"> 
        <li id="menuitem"> 
        <xsl:element name="a"> 
         <xsl:attribute name="href">javascript:void(0)</xsl:attribute> 
         <xsl:attribute name="onclick"> 
         displayResult('category.xml','category.xslt'); 
         </xsl:attribute> 
         <xsl:value-of select="substring(msws:Name, 1, 100)"/> 
        </xsl:element> 
        </li> 
       </xsl:if> 
       </xsl:for-each> 
      </ul> 
      </div> 
      <div id="content"> 
      <div id="contenttitle"> 
       Content 
      </div> 
      <div id="contentbody"> 
      <!-- 
       <div xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msws="http://tempuri.org/"><ul id="categorybody"><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The first title</a></li><li>07 Oct 2011</li><li>A nice long description 1.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The second title</a></li><li>06 Oct 2011</li><li>A nice long description 2.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The third title</a></li><li>06 Oct 2011</li><li>A nice long description 3.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The fourth title</a></li><li>05 Oct 2011</li><li>A nice long description 4.</li><li id="categoryitem"><a href="javascript:void(0)" onclick=" 
       XsltTransform('article.xml','article.xslt'); 
       ">The fifth title</a></li><li>04 Oct 2011</li><li>A nice long description 5.</li></ul></div>--> 
      </div> 
      </div> 
     </div> 
     </body> 
    </html> 
    </xsl:template> 

</xsl:stylesheet>