Не удается привязать всплывающее окно к внешнему объекту в листовке

Я пытаюсь привязать всплывающее окно листовки к внешнему html-файлу и передать объект во внешний файл. Это то, что я сделал до сих пор:

index.html

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
    <script src="scriptspl.js" type="text/javascript" ></script>

<div id="mapid" style="width: 600px; height: 600px;">
    <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);
        var markerx=L.marker([51.5, -0.09]).addTo(mymap);
        //drawLines()
        markerx.bindPopup('<iframe src="wp_popup.html"></iframe>',{minWidth : 800})
        .on('popupopen', function (e) {
            drawLines()
        })

    </script>
</body>
</html>

Это в основном загружает карту, создает маркер и привязывает всплывающее окно маркера к wp_popup.html.

wp_popup:

<body>
<div class="tab">
  <button class="tablinks" onclick="">T1</button>
  <button class="tablinks" onclick="">T2</button>
  <button class="tablinks" onclick="">T3</button>
</div>

<div id="T1" class="tabcontent">
<div> <div id='myDiv'></div> </div>
</div>

<div id="T2" class="tabcontent">
  <p>T2 </p> 
</div>

<div id="T3" class="tabcontent">
  <p>T3</p>
</div>
</body>

Функция drawLines находится в файле scriptspl.js:

function drawLines() {
var one = {
   x: [1,2,3],
   y: [1,2,3],
   mode: 'lines+markers',
   name: 'Sample Data'
};
var data = [one];
var layout = { title: 'Sample Graph' };
Plotly.newPlot('myDiv', data, layout);
}

Когда я запускаю все вышеперечисленное, я получаю ошибку Uncaught Error: No DOM element with id 'myDiv' exists on the page.. После этого ответа я добавил var myDiv = document.getElementById('myDiv'); поверх scriptspl.js и изменил последнюю строку кода на Plotly.newPlot(myDiv, data, layout);, но затем я получаю сообщение об ошибке, что объект myDiv имеет значение Null. Любая помощь в решении этой проблемы приветствуется. Заранее спасибо.


javascript html leaflet
person user2727167    schedule 25.04.2021    source источник
comment
Скорее всего, scriptspl.js запускается до HTML-кода <div id='myDiv'>, и указанный div не существует в дереве DOM во время выполнения кода.   -  person IvanSanchez    schedule 25.04.2021