Question

我试图首次使用Ajax将网站整合在一起，最终与时俱进并弄明白。到目前为止，它只是HTML页面和一些JS。使用我在网上找到的一些基本的AJAX脚本，我有一个主要的index.htm，它有一个标题，导航和内容div。 Ajax调用抓取其他内容包括（大部分是文本内容的文件）投入内容div。除了在我尝试添加Google Directions小工具的时候，它大部分都有效。当我添加脚本代码时，它会给我一个文件并调用该文件，没有明显的输出。

关于我做错了什么或我缺少什么的任何建议？

Answer 1

如果我正确理解你，这是不必要的使用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>

如果您需要进一步说明，请告诉我。

Answer 2

我相信我知道你想要完成什么，因为我遇到了同样的问题。我找到了解决方案。所以我会说不，这不是ajax的不当使用，因为在某些情况下你可能遇到这种情况。

将路线小工具直接放在通过ajax加载的页面内容中，但放在单独的文件中，例如＆＃34; directionsgadget.html＆＃34; （在此文件中插入小工具的脚本标记）。

然后使用iframe与src =＆＃34; /path/to/directionsgadget.html"在你的ajax加载的内容。

小工具应该以这种方式加载。

如果您希望小工具在iframe中居中，则可以将scripts标记包含在directionsgadget.html中的div中，并设置宽度和样式=＆＃34; margin：0px auto＆＃34;。这将使小工具居中。

以下是一个例子：

您的主页是＆＃34; index.html＆＃34;，并且包含一个包含ajax加载内容的div：

<!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加载的内容，其中包括google小工具。我们不打算将小工具直接放在这里，而是将它放在一个单独的文件中并用iframe指向它。让我们调用第一个文件ajaxcontent.html，如第一个文件的head部分中的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>

现在，我们将把google小工具本身的脚本放在一个单独的文件中，＃34; directions.html＆＃34; （如上面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>

我希望这个例子足够清楚！

从Ajax调用中获取Google方向小工具

2 个答案: