时间戳

首页 > 解决方案 > 附加html代码后如何获取就绪事件

javascript - 附加html代码后如何获取就绪事件

问题描述

我有以下jsfiddle

https://jsfiddle.net/3qge41b0/

$('#myP').click(function() {
  GetMap();
});

function GetMap() {
  var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script' + '>  </body></html>';

  $("#myDIV").html(text);

}

$('#myP2').click(function() {
  GetMap2();
});


function GetMap2() {
  var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script' + '>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script' + '>  </body></html>';

  $("#myDIV").html(text);

}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <h1>My Web Page</h1>

  <button id="myP">Click me.</button>
  <button id="myP2">Or Click me.</button>

  <div id="myDIV" style="width=100%;height=100%">This is a div element.</div>
</body>

</html>

    $('#myP').click(function() { GetMap(); });

function GetMap()
{
    var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });</script'+'>  </body></html>';

    $("#myDIV").html(text);

}

$('#myP2').click(function() { GetMap2(); });


function GetMap2()
{
    var text = '<html lang="en">  <head>    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">  <style> .map { height: 400px;  width: 100%; }  </style> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" asynchronous=false defer=true id="oljs" onload="LoadMap"></script'+'>    <title>OpenLayers example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div> <script type="text/javascript" defer=true>  function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);</script'+'>  </body></html>';

    $("#myDIV").html(text);

}

正如您所看到的，它只是一个使用 html 字符串动态加载的 div。问题是，第一个按钮最终出现错误，因为 ol.js 库似乎没有加载。如果我设置超时，它会起作用（GetMap2）。此外，如果您第二次按下第一个按钮。

但我发现这是一种解决方法而不是解决方案。如果连接很慢并且加载库需要超过 100 毫秒怎么办？

加载库时是否有可能获取事件？我尝试了很多不同的附加或添加 html 字符串的方法。没有任何效果。ol.js 上的 ready 或 load 事件未正确触发。

有人知道如何解决这个问题吗？

亲切的问候尼科

标签： javascriptjquerydynamic

解决方案

使用 jquery，您可以使用getScript来确保脚本已完全加载。

$.getScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", function(){ LoadMap(); });

https://api.jquery.com/jQuery.getScript/

示例：https ://jsfiddle.net/usc23yt6/#&togetherjs=9NyczI3xx7

推荐阅读