從Ajax調用抓取Google方向小工具

我想第一次使用Ajax將一個網站扔在一起，最終得到時間並弄清楚。到目前爲止，它只是HTML頁面和一點JS。使用我在網上找到的一些基本的AJAX腳本，我有主標題，導航和內容div。 Ajax調用抓取其他內容（包括大部分文本內容的文件），將其放入內容div中。除了當我試圖添加Google路線小工具時，大部分情況下都是有效的。當我添加腳本代碼時，它會給我一個文件並調用該文件，但沒有明顯的輸出。從Ajax調用抓取Google方向小工具

關於我在做什麼的錯誤或我錯過了什麼建議？

來源

2009-10-09 Greg

你可以鏈接到該項目或提供一些代碼 – 2009-10-29 00:04:51

如果我正確理解你，這是一個不必要的使用AJAX。從看起來你想要做的是通過JavaScript調用加載JavaScript。這可以使用描述爲here的任一方法來完成。例如：

<script type="text/javascript"> 

function dhtmlLoadScript(url) 
{ 
    var e = document.createElement("script"); 
    e.src = url; 
    e.type="text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(e); 
} 

onload = function() 
{ 
    dhtmlLoadScript("dhtml_way.js"); 
} 

</script>

如果上述鏈接不起作用或者我誤解了您的問題，請提供進一步的說明或某種代碼示例。

您的評論

這裏跟進一個變通爲您的小工具，下面的代碼將是你的主網頁（初始裝入一個）上。這裏是我的測試HTML頁面：

<html> 
<head> 
    <script type="text/javascript"> 
    var gadget; 

    function getGadgetAndMove(node) 
    { 
    gadget = document.getElementsByTagName("table")[0]; 
    node.appendChild(gadget); 
    gadget.style.visibility = "visible"; 
    gadget.style.display = "inline-block"; 
    } 
    </script> 
    <style> 
    .ig_reset, .ig_tbl_line { visibility:hidden;} 
    </style> 
</head> 

<body> 
    <div onclick="getGadgetAndMove(this);">Test</div> 
</body> 
    <script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&amp;up_fromLocation=&amp;up_myLocations=1600%20Amphitheatre%20Pkway%2C%20Mountain%20View%2C%20CA&amp;synd=open&amp;w=320&amp;h=55&amp;title=Directions+by+Google+Maps&amp;brand=light&amp;lang=en&amp;country=US&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script> 
</html>

如果您需要進一步解釋請讓我知道。

來源

2009-10-30 16:13:35 Mark

儘管這確實有幫助（我從來沒有能夠弄清楚如何動態地添加js src鏈接），但我不太確定那是否我使用AJAX加載單獨的頁面（出於某些設計原因），但其中一個頁面有谷歌方向gadget。從我讀過的AJAX無法加載跨站點腳本，這就是我認爲問題即將到來。這個解決方案是否存在？ k在那附近？ – Greg 2009-11-02 17:17:14

答案更新，以反映您的評論，希望這有助於。 – Mark 2009-11-02 23:42:23

我相信我知道你想完成什麼，因爲我遇到了同樣的問題。我找到了一個解決方案。所以我會說，不，這不是不恰當的使用ajax，因爲在某些情況下你可能會遇到這種情況。

將說明小工具不直接放在通過ajax加載的頁面內容中，而是放在單獨的文件中，如「directionsgadget.html」（在此文件中插入小工具的腳本標記）。

然後在加載ajax的內容中使用帶有src =「/ path/to/directionsgadget.html」的iframe。

小工具應該以這種方式裝載。

如果您希望小工具在iframe中居中，您可以在設置寬度和style =「margin：0px auto」的div中將方法標記封裝在directionsgadget.html中。這將以小工具爲中心。

下面是一個例子：

你的主頁是「index.html的」，幷包含一個div將包含AJAX加載的內容：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $.ajax({ 
     url: 'ajaxcontent.html', 
     success: function(returndata){ $('#ajaxcontent').html(returndata); } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="ajaxcontent"></div> 
</body> 
</html>

然後，你必須與內容的文件是通過ajax加載的，這其中包括谷歌小工具。我們不會直接將小工具放在這裏，而是將它放在一個單獨的文件中，並用iframe指向它。讓我們把第一個文件ajaxcontent.html，作爲第一個文件的頭一節中的Ajax調用表示：

<span>Here is some content that will be loaded onto the main page via ajax.</span><br /> 
    <span>Among other things, there is a google directions gadget that will be loaded.</span> 
    <div id="getdirections" style="margin:0px auto;"> 
    <iframe style="width:365px;height:216px;" src="directions.html"></iframe> 
    </div>

現在我們把劇本的谷歌小工具本身在一個單獨的文件「的方向。HTML」（如上面的iframe的src表示），並且爲了呈現小工具爲中心，我們要一個div內包裹腳本標籤只是如此：

<div style="width:336px;height:116px;margin:0px auto;"> 
    <script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&amp;up_fromLocation=&amp;up_myLocations=_a_bunch_of_information_with_personal_list_of_locations_&amp;synd=open&amp;w=320&amp;h=55&amp;title=Street+directions+by+Google+Maps&amp;brand=light&amp;lang=it&amp;country=ALL&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"></script> 
</div>

我希望這個例子是

來源

2011-05-21 19:52:12 JohnRDOrazio

從Ajax調用抓取Google方向小工具

回答

相關問題