如何使用scriptElement.innerHTML=JSON.stringify创建具有函数名的脚本

Question

我正在修改几个返回一些股票符号数据的公共小部件api。我修改了调用，以便在用户单击链接时填充"symbol"值。第一块是他们的例子，我在下面做了修改。工作良好。

<script type="text/javascript" src="https://abcstocks.com/external-embedding/embed-widget-technical-analysis.js" async>
{
"interval": "1m",
"width": 425,
"isTransparent": false,
"height": 450,
"symbol": "NASDAQ:AAPL",
"showIntervalTabs": true,
"locale": "en",
"colorTheme": "light"
}
</script>

使用"符号"的变量，我创建了以下内容：

function createWidgetScriptElement(symbol) {
var scriptElement = document.createElement('script');
scriptElement.async = true;scriptElement.src = 'https://abcstocks.com/external-embedding/embed-widget-technical-analysis.js';
scriptElement.innerHTML = JSON.stringify({
"symbol": symbol,
"interval": "1m",
"width": 425,
"colorTheme": "light",
"isTransparent": false,
"height": 450,
"showIntervalTabs": true,
"locale": "en"
});
return scriptElement;
}

这是用于切换符号的点击处理程序

$('.mymenuitem').on('click',function(e){
var symbol = $(this).attr('data-href');
var widgetScriptElement = createWidgetScriptElement(symbol);
$('#widget_market-access_home').empty();
document.querySelector('#widget_market-access_home').appendChild(widgetScriptElement);
e.preventDefault();
})

然而，现在我需要创建一个格式不同的附加文件。我陷入了如何使用相同的scriptElement.innerHTML=JSON.stringify 在JSON负载中插入函数名的困境

以下是的示例

<script type="text/javascript" src="https://abctrading.com/tv.js"></script>
<script type="text/javascript">
new abc.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true
}
);
</script>

所以对于第二个例子，我需要调用一个外部js资源，然后在页面上创建新的小部件。如何在JSON strigify函数之前添加"abc.widget"？

Answer 1

你的做法不对。由于您在JavaScript领域内，因此不需要创建新的脚本文件来运行某些内容。等待脚本加载，然后执行您的函数。

我已经自由地使用jQuery重写了您的脚本，它在加载脚本时基本上与添加的侦听层相同。加载脚本时，将使用传递的symbol创建abc.widget。

函数返回jQuery对象中的脚本元素。

function createWidgetScriptElement(symbol) {
var $scriptElement = $('<script>');
$scriptElement.prop('async', true);
$scriptElement.prop('src', 'https://abcstocks.com/external-embedding/embed-widget-technical-analysis.js');
// Create `abc.widget` after the script is appended and loaded.
$scriptElement.on('load', function() {
new abc.widget({
"width": 980,
"height": 610,
"symbol": symbol,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true
}
}
return $scriptElement;
}

$('.mymenuitem').on('click', function(e) {
var symbol = $(this).attr('data-href');
var $widgetContainer = $('#widget_market-access_home');
var $scriptElement = createWidgetScriptElement(symbol);
$widgetContainer.empty();
$widgetContainer.append($scriptElement);
e.preventDefault();
})