How access an object declared in another html file?

Question

I am importing a map created using qgis2web inside a <iframe>.

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

I need to access an object (the map) declared in a <script> inside the /qgis/index.html file and modify some of its properties.

I was able to do it directly inside the /qgis/index.html file, but because this folder is exported from another software and will be often modify, I want to write all this code inside the main index.html file, where the map is imported inside the <iframe>

The object in the /qgis/index.html file :

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

...And the modifications I want to perform inside the main index.html file :

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

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

I tried to do it via document.getElementById('map'); but it did not work.

EDIT 1

What I tried (unsuccessfully)

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);

EDIT 2 Working, but the iframe load enters a loop and load itself indefinitely

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>

Your question is a possible duplicate of http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript — ViRuSTriNiTy, Dec 27 '15 at 21:41

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

Maybe it's related to this question.

If it is, you should try with var map = document.getElementById("iframeid").contentWindow.map;

EDIT

I've tried this and it's the same for me. I've found that i need a little time to wait before accessing the variable in the iframe because when the javascript is called the iframe hasn't been loaded yet.

In my super simple example i've used a setTimeout function: (setTimeout(function(){alert(document.getElementById('iframe').contentWindow.text)}, 5000);) but the best solution is to define an onLoad event like this one

edited May 23 '17 at 11:44

Community

1
1

answered Dec 27 '15 at 21:44

Efesto

137
1
7

Thank you, I have tried this (see edit) but it did not work either. – Jean Dec 27 '15 at 21:59
That was the problem : I added an onload function thanks to your link, and now it works. But now the iframe is looping itself, have you any idea how to precent such behaviour ? – Jean Dec 28 '15 at 20:43

score 0 · Answer 2 · answered Dec 28 '15 at 12:02

0

Why not abandon the iframe and user a qgis2web template instead?

answered Dec 28 '15 at 12:02

Tom Chadwin

151
10

I am really new to web development. The map is displayed inside a `Polymer`based website and the `iframe` was the simplest working example. Because the map will be updated, I don't want to modify the code exported thanks to `qgis2web`. The template you are talking about is the exported website created thanks to `qgis2web` ? – Jean Dec 28 '15 at 13:01
Ah, if the web page is built using some other framework, an iframe is the easiest way to go. The templates I was taking about are in the /templates subdirectory of qgis2web and allow you to customise the output HTML of the plugin. However, I'm not sure that will work for you very well in this instance. – Tom Chadwin Dec 28 '15 at 21:38

How access an object declared in another html file?

2 Answers2