javascript - 如何在嵌入了<iframe srcdoc =“”>的（Mapbox）地图上添加音频文件？

我正在尝试建立一个声音映射系统：它由Mapbox构建并嵌入到另一个网站中，该网站仅允许</code>避免脚本冲突。一方面，我需要干预地图的代码，另一方面，要遵守嵌入约束。问题似乎出在<code> <iframe srcdoc> </code>中的<code> .setHTML（）</code>函数中。但是，我是编码新手，我真的不能说。</p> <p>这是我的方法：在Mapbox中创建地图样式和图块集后，我使用了<code> <iframe srcdoc> </code>注入了一些代码，用于显示弹出窗口，获取集合的地图功能或向左支持脚本。 </p> <pre> <code> var feature = features [0]; var popup = new mapboxgl.Popup（） .setLngLat（feature.geometry.coordinates） .setHTML（'<h3>'+ feature.properties.title +'</h3> <p>'+ feature.properties.description +'</p> <音频控件> <source src =“'+ feature.properties .urls +'“ type =” audio / ogg“>'+'<source src =”'+ feature.properties.urls +'“ type =” audio / mp3“>'+'</audio>'） .setLngLat（feature.geometry.coordinates） .addTo（map）; }）; </code> </pre> <p>我希望注入的代码能够从Mapbox功能中提取音频文件并显示音频播放器，以提供完全的交互体验。</p> </div> <div class="answer-list"> <h4>0 个答案:</h4> <div class="hr-line-dashed"></div> <div>没有答案</div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/22485621">如何在专用网络上托管地图集地图？</a> </li> <li> <a href="/q/30362835">如何在地图框地图中添加标记？</a> </li> <li> <a href="/q/35565968">如何将标记添加到Mapbox＆＃39; Light＆＃39;地图样式？</a> </li> <li> <a href="/q/40430307">mapbox如何在线串中添加标签？</a> </li> <li> <a href="/q/44332542">如何在Mapbox地图上显示我的数据集中的所有要素</a> </li> <li> <a href="/q/50764164">如何在Mapbox地图上添加固定标记？（反应）</a> </li> <li> <a href="/q/52493595">在地图上添加GeoJSON作为标记</a> </li> <li> <a href="/q/55111562">如何在mapbox的Navigationlauncher上添加标记？</a> </li> <li> <a href="/q/55908148">如何在嵌入了<iframe srcdoc =“”>的（Mapbox）地图上添加音频文件？</a> </li> <li> <a href="/q/56870999">如何使用Swift 4进行聚类，从而在Mapbox地图上添加位置？</a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host =="www.thinbug.com"){ (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>