How to create a script with a function name using scriptElement.innerHTML = JSON.stringify?

问题

I am modifying a couple of public widget api's that return some stock symbol data. I modified the call so I can populate the 'symbol' value when a user clicks on a link. The first block is their example with my modifications below. Works fine.

<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>

with a variable for 'symbol' I created the following:

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;
}

This is click handler for the switching of symbols

$('.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();
})

However, now I need to create an additional one that isn't formatted the same way. Im getting stuck on how to insert a function name inside the JSON payload using the same scriptElement.innerHTML = JSON.stringify

Here is the example

<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>

So for the second example, I need to call an external js resource then create the new widget on page. How do I add 'abc.widget' before the JSON strigify function?

回答1:

You are going at it the wrong way. Since you are inside of JavaScript land you don't need to create a new script file to run something. Wait for the script to load and then execute your function.

I've taken the liberty to rewrite your script using jQuery, it does basically the same with the added layer of listening when the script loads. When the script is loaded the abc.widget is created with the symbol that is passed.

The function returns the script element in a jQuery object.

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();
})

来源：https://stackoverflow.com/questions/64017605/how-to-create-a-script-with-a-function-name-using-scriptelement-innerhtml-json

标签

javascript

html

jquery

json