Question

我正在<iframe>内导入使用 qgis2web 创建的地图。

 <iframe id="leaflet"
         src="/qgis/index.html"
         scrolling="no"
         frameborder="0"
         style="height: 100vh;width: 100%">
 </iframe>

我需要访问 /qgis/index.html 文件中<script>中声明的对象（地图）并修改其部分属性。

我能够直接在 /qgis/index.html 文件中执行此操作，但因为此文件夹是从其他软件导出的，并且经常会被修改，< em>我想在主 index.html 文件中编写所有这些代码，其中地图是在<iframe>

内导入的

/qgis/index.html 文件中的对象：

   <script>
   ...
   var map = L.map('map', {zoomControl:true, maxZoom:18, minZoom:15});
   ...
   </script>

...我想在主 index.html 文件中执行的修改：

    <script>
    var lat = -0.017;
    var lng = 0.015;
    var zoom = 16;

    map.setView([lat, lng], zoom);
    </script>

我试图通过document.getElementById('map');来做，但它不起作用。

编辑1

我尝试了什么（失败了）

index.html：

<script>
  var lat = -0.017;
  var lng = 0.015;
  var zoom = 16;

  var map = document.getElementById("leaflet").contentWindow.map;
  map.setView([lat, lng], zoom);

编辑2 工作，但iframe加载进入循环并无限期加载

的index.html

<iframe id = 'iframeid'
    src="/qgis/index.html"
    scrolling="no"
    frameborder="0"
    style="height: 100vh;width: 100%"
    onload="on_load(this)">
</iframe>
...
<script type="text/javascript">

  function on_load(iframe) {
  try {
    var lat = -0.017;
    var lng = 0.015;
    var zoom = 16;

    var map = document.getElementById("iframeid").contentWindow.map;

    map.setView([lat, lng], zoom);
  } catch (e) {
    // This can happen if the src of the iframe is
    // on another domain
    alert('exception: ' + e);
  }
}
  </script>

Answer 1

也许这与this问题有关。

如果是，您应该尝试使用var map = document.getElementById("iframeid").contentWindow.map;

修改

我试过这个，对我来说也一样。我发现在访问iframe中的变量之前需要一点时间等待，因为当调用javascript时，iframe尚未加载。

在我的超级简单示例中，我使用了setTimeout函数：（setTimeout(function(){alert(document.getElementById('iframe').contentWindow.text)}, 5000);）但最好的解决方案是定义onLoad事件，如this one

Answer 2

为什么不放弃iframe并使用qgis2web模板呢？

如何访问另一个html文件中声明的对象？

2 个答案: