TradingView小部件替换整个HTML正文

试图将TradingView小部件添加到我的网站.当用户select从下拉列表中选择一个选项时,必须加载此小组件.

问题:窗口小部件加载,但它替换了正文中的所有内容,因此下拉列表消失.

示例:

HTML代码:

    EURUSD
    EURJPY

JS:

function changeFX(fx){
  var fxWidget = new TradingView.widget({
      "width": 500,
      "height": 400,
      "symbol": "FX:"+fx,
      "interval": "1",
      "timezone": "Etc/UTC",
      "theme": "White",
      "style": "2",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "hide_top_toolbar": true,
      "save_image": false,
      "hideideas": true
    }); 
  return themeWidget;
}

$(document).on('change','.fx',function(){
   var widget = changeFX(this.value);
   // do something with widget.

});

http://jsfiddle.net/livewirerules/3e9jaLku/5 (选择下拉选项,查看小部件加载,但下拉列表消失)

任何建议如何使下拉列表不会消失,仍然TradingView小部件加载？

所以我可以从小部件网站上得到什么.无论发生什么,它是如何运作的.所以为了这个行为你想要的方式.您将不得不使用iframe.在index.html中创建一个单独的文件,例如chart.html,并将iframe的src作为chart.html.在更改时,甚至使用查询参数更改框架的src,并在chart.html中读取该查询参数并创建图表.以下是供您参考的代码.

的index.html

  
    
    
     
 
  
  
   
              EURUSD
              EURJPY


  

chart.html

这是我创建的一个动画演示.

我用于获取查询参数的代码的链接.

如何在JavaScript中获取查询字符串值？

锄头有帮助:)