Question

我使用 Mapbox 库及其recommended内联javascript将地图插入div元素：

<script>
mapboxgl.accessToken = 'token';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>

与此分开，我解析了某些模式的页面，并通过 jquery 对任何匹配执行replace函数，如：

$("div.comp").contents().each(function () {
    var $html = $(this).html();
    $replaced = $html.replace(/\[\?\]/g, "?");
    $replaced = $replaced.replace(... etc);
    $(this).html($replaced);
});

这些模式与 Mapbox 内联javascript无关，除了创建一个让我找到导致它的原因需要一段时间的副作用之外，不会干扰它。基本上，内联脚本将被执行两次。一旦，页面加载，第二次我的 jquery 替换函数返回html替换相关字符串和<script>代码完整。

可能和失败的解决方案：

我意识到我可以通过偏离推荐的 Mapbox 方法并使用更普遍推荐的从外部文件调用javascript的方法来解决这个问题。我想避免这种情况，原因很简单，我使用了一些条件PHP来执行或忽略与PHP变量相关的 Mapbox 代码的某些部分在页面的前面。

相反，我在 jquery函数中添加了一个额外的替换，如果找到任何<script>标记，则将其替换为空白字符串，以便它们不会被执行返回的HTML：

$replaced = $replaced.replace(/<script>[\s\S]+?<\/script>/g, "");

虽然这似乎适用于某些代码（对console.log的调用现在只调用一次而不是两次），但地图不再呈现。我猜测，或许，在<script>标记被替换之前它没有完全执行。

我可以考虑添加 on.complete 条件等等，但这一切似乎都不必要地过于复杂。我是否缺少一个更优雅的解决方案，以确保此内联脚本只执行一次，同时能够同时执行我的字符串替换功能？否则，我可能会尝试从外部js文件中运行 Mapbox ，并将PHP条件转换为javascript。

在相关但单独的说明中。我并不认为返回带有<script>标记的html会在返回时执行其中的代码，仅在页面加载时执行。它是否在页面加载时部分执行，在替换页面时没有时间完成，并再次加载？

Answer 1

从上面的评论来看，似乎可能没有更优雅的方法来解决问题。这是我能想到解决这个问题的最简单方式：

我将内联脚本移动到外部文件，并能够将条件PHP参数转换为javascript。我还在我插入地图的data attributes元素上将它们描述为div，从而翻译了几个必需的变量。从这些，我的javascript可以创建自己的替换变量，我需要提供给 Mapbox 。

替换HTML

可能和失败的解决方案：

1 个答案: