Управление HTML-текстом во всплывающем окне

Question

Я использую всплывающее окно OpenLayer.при его инициализации, параметр должен содержать HTML, отображаемый во всплывающем окне.этот параметр является строкой javascript.

У меня конфликт, с одной стороны, html-текст длинный, поэтому я предпочитаю поместить его в html-файл и прочитать файл в переменную.

OnС другой стороны, html зависит от других локальных переменных, поэтому, если я оставлю его на своем месте, я смогу объединить некоторые строки и локальные переменные для составления окончательной переменной, содержащей текст html.но это очень длинный и уродливый код ...

Может быть, опытные программисты javascript могут помочь мне найти дизайнерское решение этой проблемы?

спасибо

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-запрос будет выполнен,Вы можете создать всплывающее окно и заполнить его ранее загруженным содержимым файла.

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 для примера.

Answer 3

Я бы порекомендовал решение для географии, а также попытался бы использовать различные 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});