使用jquery點擊觸發器加載iframe

Question

我正在使用iframe將Google地圖嵌入到每個搜索引擎結果的基於搜索引擎的網站上。問題是，大多數用戶不關心看到一張地圖，並在每個搜索結果頁面上加載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>'; 

Answer 1

您可以在JavaScript的所有iframe的代碼。如果你喜歡使用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>'); 
}); 

一種方式的更加具體的可能是確定目標容器的id與數據屬性，像這樣：

HTML

<span class="address-link" data-target-id="target-div-7">Address</span> 
<div id="target-div-7"></div> <!-- target div --> 

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>'); 
}); 

所以對於每一個觸發器，可以定義目標ID作爲數據attribut e，並且您可以使用相同的腳本。

Answer 2

爲什麼要使用iframe？您可以直接在通用的「彈出式」DIV中加載Google地圖，然後在每次點擊鏈接時將該地圖居中放置到所選地址。這可能會比加載整個HTML頁面好得多。

下面是一個從概念驗證的實例，其中我幫助我的一位朋友實現了javascript/maps功能。

http://184.106.239.214/pacific_grove_zoning/ 

只要看看源代碼。您只需在自動填充字段中輸入一些地址（「1234 ..」，「1000 ...」等），然後選擇一個地址即可查看地圖更改。

這裏是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); 
     } 
    }); 
}