javascript - 回调未被调用

Question

我正在构建自定义 Power BI 可视化，因此我可以访问平台使用的 javascript 文件。我无权访问任何标记，只能在我要安装可视化的地方注入(inject)一个元素。

我正在尝试安装 Bing map ，文档如下所示:

    <div id='myMap' style='width: 100vw; height: 100vh;'></div>

    <script type='text/javascript'>
            var map;
            function loadMapScenario() {
                map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
            }


    </script>

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario' async defer></script>

脚本的 URL 有一个 callback 查询字符串参数，其中包括要调用的函数的名称。

鉴于我无权访问标记，我试图在我的可视化构造函数中动态地执行所有操作。我创建了一个函数，将它移动到全局范围，然后我添加了查询字符串 var 来引用它，但它永远不会被调用。你能看到我可能遗漏的任何东西吗？

constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        this.elem = options.element;
        const self = this;

        function moveMethodsIntoGlobalScope(functionName){
            var parts = functionName.toString().split('\n');
            eval.call(window, parts.splice(1, parts.length - 2).join(''));  
        }

        function methodsToPutInGlobalScope(){
            function loadMapScenario(){
                console.log("finally called loadMapScenario");
            }
        }

        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;

        console.log(loadMapScenario === undefined); // false, definitely in global scope
        script.src = 'https://www.bing.com/api/maps/mapcontrol?key=xxxxxxxxxx&callback=loadMapScenario';
        document.getElementsByTagName('head')[0].appendChild(script);

Answer 1

您已经定义了完成所需功能所需的功能。但是，在您给出的片段中，您实际上并没有调用 moveMethodsIntoGlobalScope()，这就是 loadMapScenario 未定义的原因。只需在注入(inject)脚本之前添加这一行。

moveMethodsIntoGlobalScope(methodsToPutInGlobalScope);