Fatal编程技术网
  • javascript/
  • Javascript 将FusionChart对象从父窗口写入子窗口

Javascript 将FusionChart对象从父窗口写入子窗口

javascript html dom

Javascript 将FusionChart对象从父窗口写入子窗口,javascript,html,dom,fusioncharts,Javascript,Html,Dom,Fusioncharts,所以我有个问题。就像我们大多数人在提问时所做的那样 我们的网站应该在IE中普遍工作，理想情况下至少在Chrome中也是如此。目前Chrome可以被诅咒，因为IE被证明是不合作的（大惊喜吧？） 我的任务是制作我们的一份报告，以一种非常具体的方式混合使用Telerik RadGrids和Fusion图表。此过程涉及将我的report div（下面代码中的ReportDataContainer）复制到子窗口 在非兼容/边缘模式下，其工作正常。主报告加载。点击打印按钮，弹出新窗口。将ReportData

所以我有个问题。就像我们大多数人在提问时所做的那样

我们的网站应该在IE中普遍工作，理想情况下至少在Chrome中也是如此。目前Chrome可以被诅咒，因为IE被证明是不合作的（大惊喜吧？）

我的任务是制作我们的一份报告，以一种非常具体的方式混合使用Telerik RadGrids和Fusion图表。此过程涉及将我的report div（下面代码中的ReportDataContainer）复制到子窗口

在非兼容/边缘模式下，其工作正常。主报告加载。点击打印按钮，弹出新窗口。将ReportDataContainer内容与Fusion Charts render方法的JS处理程序一起写入新窗口，并在两者都呈现后调用print

但是，在compat模式下，图形不会加载到新窗口上。不知道为什么不可以-它在原始报告上表现良好

无论如何，一些代码

这是我用来弹出新窗口、写入并打印的JS：-

    function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    }
    drill = window.open();
    drill.document.write("<html>" +
        "<head>" + css +
        "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />" +
        "<script type='text/javascript'>" +
        "function FC_Rendered(DOMId) { $(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); } " +
        "<\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "</head>" +
        "<body>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        $("#ReportDataContainer").html() +
        "</body>");

    drill.document.close();

    setTimeout(finishedRendering, 2000);
}

var drill = null;

function finishedRendering() {
    var loadedActualYear = $('#divActualYearGraphLoaded', drill.document).val();
    var loadedParc = $('#divParcGraphLoaded', drill.document).val();
    if (loadedActualYear == 'true' && loadedParc == 'true') {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        if (msie > 0)
            drill.location.reload();
        setTimeout(printMyChild, 3000);
    } else {
        setTimeout(finishedRendering, 1000);
    }
}

function printMyChild() {
    drill.print();
}

函数PrintDrill（）{
var cssArray=document.getElementsByTagName（'style'）；
var css=“”；
对于（var i=0；i0）
drill.location.reload（）；
setTimeout（printMyChild，3000）；
}否则{
设置超时（完成排水，1000）；
}
}
函数printMyChild（）{
drill.print（）；
}
为了进行比较，FusionChart呈现的两种方式是第一条边（有效的一条）：-

第二种是compat模式，也就是不能工作的模式（在新窗口上：/）：-

所以，是的，效果非常不同。只是把新窗口改成边缘？不起作用。强制主报告首先进入edge也会导致所有地狱的崩溃。没有选择

我试着复制到一个iframe来打印。同样的问题

也在FusionCharts论坛上发布，尽管发布的方式有些脱节

无论如何。有什么想法吗？

好的，所以最后我想出了一个解决办法。考虑到FusionCharts就像“天哪，你在一个旧版本上！升级！”一样，技术上并不理想，但不幸的是，这个解决方案超出了我的权限

第一个大变化？子文档必须完成几乎所有的工作

其次，我没有简单地复制图表对象并希望它能工作，而是存储了生成的图表XML，以便在创建后在父页面上呈现报告，然后传递到子页面，并在非常明确地将呈现设置为javascript呈现器后重新呈现

如果你跟随我的脚步，请注意这一点——在存储它时要小心。如果将XML存储在HiddenField或类似的地方，很可能会让您感到悲伤。因此，请记住要使它成为HTML安全的，然后在将其取出并再次呈现之前，将其重新解析为其原始值

因此，如果有人感兴趣或只是想告诉我这是一个多么可怕的黑客行为-下面是最终的代码：-

function UndoSafeForHTML(s) {
    s = ReplaceAll(s, "\\'", "'");
    s = ReplaceAll(s, "&lt;", "<");
    s = ReplaceAll(s, "&gt;", ">");
    return ReplaceAll(s, "<br>", "\n");
}

function ReplaceAll(s, find, replace) {
    return s.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    }
    var parcXml = document.getElementById('<%# hdnParcChartXml.ClientID %>').value;
    var actualXml = document.getElementById('<%# hdnActualChartXml.ClientID %>').value;

    parcXml = UndoSafeForHTML(parcXml);
    actualXml = UndoSafeForHTML(actualXml);

    drill = window.open();
    drill.document.write("<html>" +
        "<head>" +
        css +
        "<script type=\"text/javascript\" src='/CTWebScripts/General.js'><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/v3/swfobject.js\"><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/V3/FusionCharts.js\"><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "<script type='text/javascript'> " +
        "var intervalId = null; " +
        "function RenderCharts(){ " +
        "FusionCharts.setCurrentRenderer('javascript'); " +
        "$('#divActualYearGraph_Control_ChartDivDiv').empty(); " +
        "$('#divParcGraph_Control_ChartDivDiv').empty(); " +
        "updateFusionChart(\"divActualYearGraph_Control_ChartDivDiv\", \"" + actualXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divActualYearGraph\");" +
        "updateFusionChart(\"divParcGraph_Control_ChartDivDiv\", \"" + parcXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divParcGraph\");" +
        "intervalId = setInterval(HaveIRenderedYet, 3000);" +
        "} " +
        "" +
        "function HaveIRenderedYet(){" +
        "if($('#divParcGraphLoaded').val()=='true'&&$('#divActualYearGraphLoaded').val()=='true'){" +
        "" +
        "window.print();" +
        "setTimeout(function () { "+
        "window.close();"+
        "}, 10); " +
        "clearInterval(intervalId);" +
        "} "+
        "} " +
        "" +
        "function FC_Rendered(DOMId) { " +
        "$(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); " +
        "}" +
        "<\/script>" +
        "</head>" +
        "<body onload='RenderCharts();'>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        "<input type='hidden' id='hdnLoadedGraphs' name='loadedGraphs' value='0' />" +
        $("#ReportDataContainer").html() +
        "</body>");

    drill.document.close();

}

var drill = null;

函数UndoSafeForHTML（s）{
s=ReplaceAll（s，“\\'”，“'”）；
s=ReplaceAll（s，“，”）；
返回ReplaceAll，“
”，“\n”）；
}
函数ReplaceAll（s，find，replace）{
返回s.replace（新的RegExp（escapeRegExp（find），'g'），replace）；
}
函数escapeRegExp（字符串）{
返回字符串.replace（/（[.*+？^=！：${}（）\[\]\/\]]）/g，“\\$1”）；
}
函数PrintDrill（）{
var cssArray=document.getElementsByTagName（'style'）；
var css=“”；
对于（var i=0；i<DIV id=divActualYearGraph_Control_ChartDivDiv>
<OBJECT lang=EN id=divActualYearGraph_Control_ChartDiv class=FusionCharts style="VISIBILITY: visible" classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width="100%" height=430>
    <PARAM NAME="_cx" VALUE="10081">
    <PARAM NAME="_cy" VALUE="11377">
    <PARAM NAME="FlashVars" VALUE="*snip*">
    <PARAM NAME="Movie" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
    <PARAM NAME="Src" VALUE="/CTWebCharts/V3/StackedColumn3DLine.swf">
    <PARAM NAME="WMode" VALUE="Opaque">
    <PARAM NAME="Play" VALUE="0">
    <PARAM NAME="Loop" VALUE="-1">
    <PARAM NAME="Quality" VALUE="High">
    <PARAM NAME="SAlign" VALUE="LT">
    <PARAM NAME="Menu" VALUE="-1">
    <PARAM NAME="Base" VALUE="">
    <PARAM NAME="AllowScriptAccess" VALUE="always">
    <PARAM NAME="Scale" VALUE="NoScale">
    <PARAM NAME="DeviceFont" VALUE="0">
    <PARAM NAME="EmbedMovie" VALUE="0">
    <PARAM NAME="BGColor" VALUE="FFFFFF">
    <PARAM NAME="SWRemote" VALUE="">
    <PARAM NAME="MovieData" VALUE="">
    <PARAM NAME="SeamlessTabbing" VALUE="1">
    <PARAM NAME="Profile" VALUE="0">
    <PARAM NAME="ProfileAddress" VALUE="">
    <PARAM NAME="ProfilePort" VALUE="0">
    <PARAM NAME="AllowNetworking" VALUE="all">
    <PARAM NAME="AllowFullScreen" VALUE="false">
    <PARAM NAME="AllowFullScreenInteractive" VALUE="false">
    <PARAM NAME="IsDependent" VALUE="0">
</OBJECT>

function UndoSafeForHTML(s) {
    s = ReplaceAll(s, "\\'", "'");
    s = ReplaceAll(s, "&lt;", "<");
    s = ReplaceAll(s, "&gt;", ">");
    return ReplaceAll(s, "<br>", "\n");
}

function ReplaceAll(s, find, replace) {
    return s.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function PrintDrill() {
    var cssArray = document.getElementsByTagName('style');
    var css = "";
    for (var i = 0; i < cssArray.length; i++) {
        css += "<style type='text/css'>" + cssArray[i].innerHTML + "</style>";
    }
    var parcXml = document.getElementById('<%# hdnParcChartXml.ClientID %>').value;
    var actualXml = document.getElementById('<%# hdnActualChartXml.ClientID %>').value;

    parcXml = UndoSafeForHTML(parcXml);
    actualXml = UndoSafeForHTML(actualXml);

    drill = window.open();
    drill.document.write("<html>" +
        "<head>" +
        css +
        "<script type=\"text/javascript\" src='/CTWebScripts/General.js'><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/v3/swfobject.js\"><\/script>" +
        "<script type=\"text/javascript\" src=\"/CTWebCharts/V3/FusionCharts.js\"><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery-1.5.min.js'><\/script>" +
        "<script type=\"text/javascript\" src='/CTWebScripts/Libraries/jquery.color.js'><\/script>" +
        "<script type='text/javascript'> " +
        "var intervalId = null; " +
        "function RenderCharts(){ " +
        "FusionCharts.setCurrentRenderer('javascript'); " +
        "$('#divActualYearGraph_Control_ChartDivDiv').empty(); " +
        "$('#divParcGraph_Control_ChartDivDiv').empty(); " +
        "updateFusionChart(\"divActualYearGraph_Control_ChartDivDiv\", \"" + actualXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divActualYearGraph\");" +
        "updateFusionChart(\"divParcGraph_Control_ChartDivDiv\", \"" + parcXml + "\", \"430px\", \"430px\", \"/CTWebCharts/V3/StackedColumn3DLine.swf\", \"divParcGraph\");" +
        "intervalId = setInterval(HaveIRenderedYet, 3000);" +
        "} " +
        "" +
        "function HaveIRenderedYet(){" +
        "if($('#divParcGraphLoaded').val()=='true'&&$('#divActualYearGraphLoaded').val()=='true'){" +
        "" +
        "window.print();" +
        "setTimeout(function () { "+
        "window.close();"+
        "}, 10); " +
        "clearInterval(intervalId);" +
        "} "+
        "} " +
        "" +
        "function FC_Rendered(DOMId) { " +
        "$(\"#\" + DOMId.split(\"_\")[0] + \"Loaded\").val('true'); " +
        "}" +
        "<\/script>" +
        "</head>" +
        "<body onload='RenderCharts();'>" +
        "<input type='hidden' id='divActualYearGraphLoaded' name='actualYearGraphLoaded' value='false' />" +
        "<input type='hidden' id='divParcGraphLoaded' name='parcGraphLoaded' value='false' />" +
        "<input type='hidden' id='hdnLoadedGraphs' name='loadedGraphs' value='0' />" +
        $("#ReportDataContainer").html() +
        "</body>");

    drill.document.close();

}

var drill = null;