在弹出窗口中管理Html文本

时间:2011-01-29 22:52:59

标签: javascript string popup openlayers

我正在使用OpenLayer弹出窗口。 初始化时,需要一个参数来包含弹出窗口中显示的html。 这个参数是javascript string。

我有冲突,一方面html文本很长,所以我更喜欢将它放在html文件中并将文件读取到变量。

另一方面,html依赖于其他局部变量,所以如果我把它放在它的位置,我可以连接一些字符串和局部变量来组成包含html文本的最终变量。但这是一个非常漫长而丑陋的代码...

也许有经验的javascript程序员可以帮我找到解决这个问题的设计方案吗?

感谢

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:2)

另一种解决方案是使用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请求后,您可以创建弹出窗口并使用先前加载的文件内容填充它。

答案 2 :(得分:0)

我建议使用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});