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小部件加载？

Answer 1

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

的index.html

          EURUSD EURJPY     

chart.html

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

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

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

锄头有帮助:)

Answer 2

这肯定为时已晚，但您可以使用参数“container_id”来选择图表的放置位置。

来源： https ： //github.com/mmmy/css3demos/wiki/Widget-Constructor