Question

我有一个页面在页面加载时生成谷歌地图，我想通过链接从另一个页面调用。以下是我在彩盒中创建谷歌地图的方法：

//  show_map.php

jQuery(document).ready(function(){

    $.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() { 
        $.getJSON('map.php', function(data){
            initialize();
            setMarkers(map, data);
        });
    });
});

这是我的尝试，但有些事告诉我，我走错了路。我应该使用模态窗口来做这样的事情还是有更好的方法？

$(document).ready(function() {

    $('.show_map').click(function() { 
        $.get("show_map.php", function(data) {
          //  alert(data);
    })
});

Answer 1

如果我理解正确，那么colorbox已经设计成可以做你想做的事了。您不需要使用额外的ajax调用（它已经内置）。只需将href选项设置为您的页面而不是内联html（当然会删除inline:true选项）。完整代码（在带有地图链接的页面中）：

$(document).ready(function() {
    $('.show_map').click(function() {
        $.colorbox({
            href: "show_map.php",
            width:"643px",
            height:"653px"
        });
    })
});

如果您向该代码添加iframe: true选项，也可以加载任何外部页面。

Answer 2

如果页面只包含JavaScript，您可以使用jQuery的.getScript（），也可以使用.load（）将页面内容插入DOM。

$(document).ready(function() {

    $('.show_map').click(function() { 
          $('.some-element').load("show_map.php");
    })
});

编辑：更好的方法将颜色框改为内嵌。保存到服务器的往返。

$(document).ready(function() {
    $('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() { 
        $.getJSON('map.php', function(data){
            initialize();
            setMarkers(map, data);
        });
    });
});

我可以从远程页面加载jquery颜色框吗？

2 个答案: