我正在构建自定义的Power BI可视化,因此我可以访问平台使用的javascript文件。我无权访问任何标记,只能访问在安装可视化文件的位置注入的元素。
我正在尝试安装Bing地图,文档如下所示:
<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
querystring参数,其中包含要调用的函数的名称。
鉴于我无权访问标记,因此我试图在可视化构造函数中动态地进行所有操作。我创建了一个函数,将其移到全局范围,然后添加querystring 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);
我认为这段代码就足够了:
window.loadMapScenario = function() {
console.log("finally called loadMapScenario");
}
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = `https://www.bing.com/api/maps/mapcontrol?key=${API_KEY}&callback=loadMapScenario`;
document.getElementsByTagName('head')[0].appendChild(script);
这是一个JSFiddle,您可以尝试使用API_KEY:https ://jsfiddle.net/9mfzrcfd/2/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句