将 XML 文档(通过 ajax 调用获得)渲染到新窗口 [英] Render XML document (obtained through ajax call) to a new window

问题描述

您好，我正在寻找一种将我使用 ajax 检索的 XML 文档呈现到新浏览器窗口的方法.

我正在使用 JQuery 的 ajax() 函数将 JSON 数据发布到 MVC 控制器.控制器以字符串形式返回 XML.

我正在使用 window.open() 在 javascript 中创建一个新窗口并通过调用设置文档内容.

newwindow.document.clear();新窗口.文档.newwindow.document.write(jqXHR.responseText);newwindow.document.close();

(其中 jqXHR.responseText 是从 ajax() 调用返回的 XML.)

新窗口按预期打开，如果我在页面上查看源代码，我会看到我的 XML.但是(您知道有人要来了)浏览器窗口中没有任何显示.显然，如果我将页面源代码保存到磁盘并打开，输出将按预期呈现.

任何人都可以提出解决方案吗?重申一下，我的主要目标是将 XML 文档(通过 ajax 调用获得)呈现到新窗口.

我还应该补充一点，我希望看到由 XSLT 转换的输出.我的 XML 有这个处理指令.非常感谢

编辑--------------------------- 我使用的解决方案-------------------------

感谢大家的意见和建议.

我最终采用的解决方案是使用 target="_blank" 的表单，然后将 JSON 作为隐藏字段写入表单，并将其发布到我的控制器，该控制器返回 XML(从 JSON 构建).当 XML 从响应中返回时，浏览器按预期将其标记.我想这不是原始问题的答案.但是 Gabby 在下面有一个解决方案.

解决方案

以下仅适用于 FireFox 和 Opera，但我认为值得一提..

window.open('data:text/xml,' + encodeURIComponent( jqXHR.responseText ) );

也应该与 chrome 一起使用，但它似乎将 window.open 与通常的 URL 区别对待.><小时>

更新 这适用于所有浏览器！

问题是javascript具有使用xslt转换xml的能力.
但不是自动的，所以我们需要找到 XSLT 文件引用的 XML 文件并加载它.然后我们可以在 javascript 中进行转换并将生成的 html 传递到新窗口.

自然 IE 处理事情的方式与其他事情不同.

$.get('xml-file-here.xml',函数(xmlData){var xml = xmlData;//提取样式表，以便我们可以手动加载它var 样式表；for (var i=0;i<xml.childNodes.length;i++){if ( xml.childNodes[i].nodeName =='xml-stylesheet' ){样式表 = xml.childNodes[i].data;}}var items = stylesheet.split('=');var xsltFile = items[items.length-1].replace(/"/g,'');//手动获取xslt$.get(xsltFile, 函数(xsltData){var xslt = xsltData;var 转换；if (!window['XSLTProcessor']){//IE 的转换转换 = xml.transformNode(xslt);}别的{//非 IE 的转换var 处理器 = 新 XSLTProcessor();processor.importStylesheet(xslt);var xmldom = processor.transformToDocument(xml);var serializer = new XMLSerializer();var 转换 = serializer.serializeToString(xmldom.documentElement);}var newwindow = window.open();newwindow.document.open();newwindow.document.write(transformed);newwindow.document.close();});});

Hi I'm looking for a way to render an XML document, that I retrieve using ajax, to a new browser window.

I am using JQuery's ajax() function to post JSON data to an MVC controller. The controller returns XML as a string.

I am using window.open() to create a new window in javascript and set the documents content by calling.

newwindow.document.clear();
newwindow.document.            
newwindow.document.write(jqXHR.responseText);
newwindow.document.close();

(Where jqXHR.responseText is the XML returned from the ajax() call.)

The new window opens as expected and if I view source on the page I see my XML. BUT (you knew one was coming) nothing appears in the browser window. Obviously if I save the page source to disk and open the output is rendered as expected.

Can anyone suggest a solution? Just to re-iterate my main goal is to render an XML document (obtained through ajax call) to a new window.

I should also add that I would like to see the output transformed by an XSLT. My XML has this processing instruction. Many Thanks

Edit--------------------------- THE SOLUTION I WENT WITH -------------------------

Thanks for everyone's comments and suggestions.

The solution that I ended up going with was to have a form with target="_blank" I then wrote the JSON to the form as a hidden field, and posted it to my controller which returned the XML (constructed from the JSON). When the XML was returned from the response the browser marked it up as expected. I guess this is not an answer to the original question. But Gabby has a solution below.

解决方案

The following will work only in FireFox and Opera, but i think is worth mentioning ..

window.open('data:text/xml,' + encodeURIComponent( jqXHR.responseText ) );

should work with chrome as well but it seems to treat window.open differently than a usual URL.. if you just type the resulting url in chrome it works there as well..

---

Update This works with all browsers !

The thing is that javascript has the ability to tranform xml using xslt.
But not automatically, so we need to find the XML file for the reference to the XSLT file and load that as well. Then we can do the transformation in javascript and pass the resulting html to the new window.

Naturally IE handles thing differently than the rest.

$.get('xml-file-here.xml',
   function(xmlData){
                  var xml = xmlData;

                  //extract the stylesheet so we can load it manually
                  var stylesheet;
                   for (var i=0;i<xml.childNodes.length;i++){
                       if ( xml.childNodes[i].nodeName =='xml-stylesheet' )
                       {
                        stylesheet = xml.childNodes[i].data;
                       }
                   }
                  var items = stylesheet.split('=');
                  var xsltFile = items[items.length-1].replace(/"/g,'');

                  //fetch xslt manually
                  $.get( xsltFile, function(xsltData){
                      var xslt = xsltData;
                      var transformed;

                      if (! window['XSLTProcessor'])
                        {
                            // Trasformation for IE
                            transformed = xml.transformNode(xslt);
                        }
                        else
                        {
                            // Transformation for non-IE
                            var processor = new XSLTProcessor();
                            processor.importStylesheet(xslt);
                            var xmldom = processor.transformToDocument(xml);
                            var serializer = new XMLSerializer();
                            var transformed = serializer.serializeToString(xmldom.documentElement);
                        }

                      var newwindow = window.open();
                      newwindow.document.open();
                      newwindow.document.write(transformed);
                      newwindow.document.close();
                  });
   });

这篇关于将 XML 文档(通过 ajax 调用获得)渲染到新窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！