Jquery load() 一个包含 JavaScript 的 html 文件

2023-12-15

我有一个很大的困境。我想加载一个.html文件包含 javascript(google 地图) 代码来渲染其中的 div。

maps.html 看起来像这样:

    <script type="text/javascript">
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}
</script>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[




var hash = getUrlVars();

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(hash['lat'],hash['lng']),
        zoom: 14,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;


      downloadUrl("xmlout_carol.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length+1; i++) {
          var name = markers[i].getAttribute("nume");
          var address = markers[i].getAttribute("adresa");
          var type = markers[i].getAttribute("id");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<font face='Tahoma' style='font-size:12px;'><div style='min-width:230px;'><b>" + name + "</b> <br/>" + address +"<a target='_top'  href='../statii.php?id=" + type + "'><img style='float:right; border:0px; margin-left: 40px;'  src='go.png' /></a><div/></font>";
          var tip = markers[i].getAttribute("tip");
          var icon = customIcons[tip] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
           // shadow: 'shaddow.png'
          //shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'mouseover', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      google.maps.event.addListener(map, 'click', function() {
        infoWindow.close(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  <body onload="load()">
    <div id="map" style="width: 900px; height: 500px"></div>
  </body>

该脚本将地图渲染到div.map

我想做的是加载这个.html到一个包含在另一个div中的div中.php像这样的文件:

$("div#insert_here").load("maps.html?lat=xxx&long=yyy");

它输出包含在maps.html中的div,但没有地图也没有java。

所以问题是...我如何加载.html在另一个文件中使用jquery.php文件,如果.html文件已经包含将数据输出到的 javascriptdiv in .html文件 ???

多谢 !


您是否可以首先加载页面中的 JavaScript,对 HTML 进行 ajax 调用,并在 ajax 请求完成后调用 JavaScript,而不是加载同时包含 HTML 和 JavaScript 的文件?这将解决这个问题的很多令人头疼的问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery load() 一个包含 JavaScript 的 html 文件 的相关文章

  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 如何处理 REST api 中的 php 通知、警告和错误?

    在 REST API 中 200 响应表明操作成功 PHP 默认情况下直接在响应正文中输出错误消息 而不更改响应代码 在 SPA 中 用户无法直接看到响应文本 因此 当应用程序未按预期工作时 我通过 FireBug 检查响应正文 以检查可能
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • jQuery:处理 getJSON() 中的错误?

    使用 jQuery 时如何处理 500 错误getJSON http api jquery com jQuery getJSON 有几个关于错误处理的问题getJSON and https stackoverflow com questio
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • PHP 中的 -> 和 :: 有什么区别?

    这个东西困扰我好久了 一直找不到 在 php 中使用 和 gt 之间的类有什么区别 让我举个例子 想象一个名为 MyClass 的类 该类中有一个函数 myFunction 使用有什么区别 MyClass myclass new MyCla
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • session_start():无法解码会话对象

    我有时在使用 CodeIgniter 时遇到以下问题 错误 2019 03 05 19 57 26 gt 严重性 警告 gt session start 无法解码会话对象 会话已被销毁 system libraries Session Se
  • 在本地 SDK 服务器上工作时,实时 Google App Engine 上出现 404

    我已经在GAE标准环境上部署了几个PHP应用程序 一切正常 现在我正在部署一个新应用程序 该应用程序位于由gcloudSDK按预期工作 终端命令 dev appserver py log level warning app yaml 问题是
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • PHPUnit - 模拟 S3Client 无法正常工作

    库 aws aws sdk php 2 PHP 版本 PHP 5 4 24 cli 作曲家 json require php gt 5 3 1 aws aws sdk php 2 require dev phpunit phpunit 4
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述

随机推荐