Javascript 使用jquery在单击触发器时加载iframe

我正在开发一个基于搜索引擎的网站，它使用iFrame将谷歌地图嵌入到每个搜索引擎结果中。问题是，大多数用户不在乎看到地图，在每个搜索结果页面上加载20个iFrame，而其中1个以上被查看的机会非常小，这是很糟糕的，因为这样会减慢网站的加载时间。我试图只在点击带有“地址链接”的触发器时，加载包含类“地址弹出”的容器中的iframe。在css中，我将iframe的显示设置为none，尽管它似乎仍然在加载，甚至在它可见之前

触发代码：

<span class="address-link">Address</span>

地址

iframe代码：

echo '<div class="address-popup">
            <iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
       </div>';

echo'
';

您可以将iframe的所有代码都保存在javascript中。如果您喜欢使用jQuery，可以这样做：

$('.address-link').click(function(){
   $('.address-popup').html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
});

$（'.address link'）。单击（函数（）{
$（'.address popup'）.html（''）；
});

更具体的一种方法可能是使用数据属性定义目标容器的id，如下所示：

HTML

地址

jQuery

$('.address-link').click(function(){
   var targetId = $(this).data('target-id');
   $('#' + targetId).html('<iframe class="map" style="margin-top:45px;" width="570" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q='.$addressString.'&amp;aq=&amp;ie=UTF8&amp;hq=&amp;hnear='.$addressString.'&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>'); 
});

$（'.address link'）。单击（函数（）{
var targetId=$（this）.data（'target-id'）；
$（'#'+targetId）.html（''）；
});

---

因此，对于每个触发器，可以将目标id定义为数据属性，并且可以使用相同的脚本。

为什么要使用iFrame？你可以直接在一个普通的“弹出”分区中加载一个谷歌地图，然后点击每个链接，将地图放在所选地址的中心。这可能比加载整个HTML页面的性能要好得多

下面是一个概念验证的工作示例，我在其中帮助一位朋友实现了javascript/maps功能

http://184.106.239.214/pacific_grove_zoning/

只要看看源代码。您只需在自动完成字段中键入一些地址（“1234..”、“1000…”等），然后选择一个地址，就可以看到映射的更改

下面是这个站点上与google地图功能相关的javascript的主要部分

function map_initialize() {
    // instantiate google map
    var initialLatlng = new google.maps.LatLng(37.4328, -122.077);
    var initialOptions = {
        zoom: 18,
        center: initialLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById('property_map'), initialOptions);
    geocoder = new google.maps.Geocoder();
}

function map_to_address(address) {
    if (marker != undefined) {
        marker.setMap(null);
    }
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        // map.fitBounds(results[0].geometry.bounds);
        marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Unable to map provided address. Error: " + status);
      }
    });
}

---

我想你错过了js代码谢谢你的回复。但是，如果我有20个这样的.address链接容器，并且我只想加载触发点所在的iframe呢？谢谢你的回复。你能详细说明一下如何在没有iframe的情况下嵌入Google地图吗？

function map_initialize() {
    // instantiate google map
    var initialLatlng = new google.maps.LatLng(37.4328, -122.077);
    var initialOptions = {
        zoom: 18,
        center: initialLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById('property_map'), initialOptions);
    geocoder = new google.maps.Geocoder();
}

function map_to_address(address) {
    if (marker != undefined) {
        marker.setMap(null);
    }
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        // map.fitBounds(results[0].geometry.bounds);
        marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Unable to map provided address. Error: " + status);
      }
    });
}