管理弹出窗口中的HTML文本

Question

我正在使用OpenLayer弹出窗口。初始化时，需要一个参数来包含弹出窗口中显示的HTML内容。这个参数是JavaScript字符串。 我遇到了一个问题，一方面HTML文本很长，所以我更喜欢将它放在HTML文件中，并将文件读取到变量中。 另一方面，HTML依赖于其他本地变量，如果我将它留在原处，我可以连接一些字符串和本地变量来组成包含HTML文本的最终变量。但这段代码非常长且难看…… 也许有经验的JavaScript程序员可以帮助我找到解决这个问题的设计方案？ 谢谢。

- Day_Dreamer

---

你目前有什么代码？ - alex

Answer 1

另一种解决方案是使用Ajax请求来加载您的文件，然后在弹出窗口内打印内容。 使用JQuery：

$.get('myfile.php',function(content){
   var popup = new OpenLayers.Popup("popupid",
         new OpenLayers.LonLat(mouseX,mouseY),         
         new OpenLayers.Size(360,200),               
         content,
         true);  
   map.addPopup(popup);
});

当Ajax请求完成后，您可以创建弹出窗口并用先前加载的文件内容填充它。

- Fran Verona

Answer 2

由于您正在使用OpenLayers，因此可以使用OpenLayers.loadURL函数从服务器检索HTML。 http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Ajax-js.html 如果您想将本地变量传递到服务器端的HTML中，可以设置一个简单的处理程序来接受变量，并将其集成到一些静态HTML中（使用字符串格式化或模板）。 如果您使用.NET，则可以使用.ashx文件来实现。有关示例，请参见http://dotnetperls.com/ashx。

- geographika

Answer 3

我建议使用geographikas的解决方案，并尝试使用不同的js类来提高可维护性和可读性。不要在同一个对象中完成所有操作，创建自己的弹出窗口对象，该对象从OpenLayers.Popup.Anchored继承或使用某些内容，并从那里进行Ajax服务器调用。这样，您就不会在其他代码中混杂此类内容。这也使得需要时易于重用和替换。 我会选择像这样的东西（未经测试！）：

mynamespace.mypopup = function(o) {

    var size = new OpenLayer.Size(100, 70);
    var icon = new OpenLayers.Icon(); // Fill it
    var popup = new OpenLayers.Popup.Anchored(o.id, o.lonlat, size, getContent(), icon, false, null);

    var getContent = function() {
        // ajax call
        // return a string
    }

    return popup;
}

在一个名为“mypopup.js”的文件中

并使用以下方式调用：

 var popup = new mynamespace.mypopup({id: 'whatever', lonlat: myLonLat});

- Niklas Wulff