用于从另一个 .aspx 加载地图的 Jquery 解决方案？答案

【问题标题】：Jquery solution for loading a map from another .aspx?用于从另一个 .aspx 加载地图的 Jquery 解决方案？
【发布时间】：2013-02-21 22:52:39
【问题描述】：

尝试实现一个 Jquery 打印模板 (C# ASP.net)，该模板从我的 Default.aspx 获取我的地图并将其附加到打印页面 (Print.htm) 以便我可以编辑 HTML。到目前为止...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>

  <script type="text/javascript">

  $(document).ready(function() {
  $("#Printbtn").click(function() {  

  var mapObj = $("MapCell_Map1");
  var mapHtmlStr = mapObj.html();

         mapHtmlStr = mapHtmlStr.replace(/CURSOR: crosshair; /g, "");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove",          "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].pendingTiles.remove", "return;");
         mapHtmlStr = mapHtmlStr.replace("Maps['Map1'].keyFocus=true;", "");


        $.ajax({url:"print.htm", context: document.body, 
        success: function(response){


        var printDoc = $(response);
        printDoc.find("#mapPanel").html(mapHtmlStr);
        var pwin = window.open("Print.htm");
        var pdoc = window.document.open();
        pdoc.write(printDoc.html());
        pdoc.close();

        });

        return false;

  });
  });     
</script>

不会触发，只是在单击按钮后回发...

<asp:Button runat="server" id="Printbtn" Text="Print" Forecolor="white"/>

Print.htm 页面...

html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>


</head>
<body>
<div id="MapPanel">

</div>
</body>
</html>

【问题讨论】：

你为什么使用javascript来做这个？通过 asp.net 进行编码和维护似乎会容易得多
谢谢谢。那么如何在打印模板上显示我的地图窗口呢？

标签： javascript jquery asp.net html css

【解决方案1】：

如果您要添加的 Html 是静态的，您可以将单独的 Html 文件加载到内存中，然后在将内容写入新窗口之前将动态 Html 添加到隐藏的 div 中

jQuery 示例（未测试）：

function printmap() {
    var mapObj = $("#Map1");
    var mapHtmlStr = mapObj.html();
    // snip - do string replacements as shown in question
    $.ajax({url:"print.html", context: document.body, 
        success: function(response){
            var printDoc = $(response);
            printDoc.find("#mapPanel").html(mapHtmlStr);
            var pwin = window.open("#");
            var pdoc = window.document.open();
            pdoc.write(printDoc.html());
            pdoc.close();
    });
}

在 Javascript 中加载 Html 文件的更多非 jQuery 示例显示在此post：

【讨论】：

这可能是因为打开的 Url 是 '#' 所以浏览器假定它正在当前页面上加载一个锚点。 window.open 方法有很多选项可以让您自定义它的外观，请参阅w3schools.com/jsref/met_win_open.asp。将新窗口的名称设置为“打印”并隐藏工具栏应该会呈现出您所追求的外观。
你为什么要重定向？你不是在Javascript中动态生成Window内容吗？
当用户触发“打印”按钮时，我正在尝试使用 window.open 方法和 getElementbyID 打开带有我的地图的打印模板。我可以让它做到这一点。我遇到的问题是如何将任何 HTML 和 CSS 添加到打印模板，因为 window.open 产生的 url 保持在“default.aspx”，因此我无法为打印模板定义 HTML 文件。希望这是有道理的！
答案中显示的方法应该可以解决这个问题，它在 Javascript 中加载打印页面 html（使用 jQuery），将地图 html 添加到模板中，然后打开一个包含组合结果的新窗口。因此，您不需要在新窗口中加载不同的文件。
事件未触发可能是由于 ASP.NET 重命名控件 $("button[id$=Printbtn]") 或 $("input[id$=Printbtn]") 应该解决这个问题.另外在 printmap 函数的底部添加“return false”应该会停止重新加载。