Question

尝试将TradingView widget添加到我的网站中。当用户select从下拉列表中选择时，此小组件必须加载。

问题：小部件加载，但它会替换正文中的所有内容，从而下拉消失。

示例：

HTML代码：

<select name="fx" class="fx">
    <option value="EURUSD">EURUSD</option>
    <option value="EURJPY">EURJPY</option>
</select>

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

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
      $(document).on('change','.fx',function(){
       //var widget = changeFX(this.value);
        document.getElementById('content').src = "chart.html?value="+this.value;
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:400px;
    width:600px;
    display:none;
  }
</style> 
  </head>
  <body>
   <select name="fx" class="fx">
              <option value="EURUSD">EURUSD</option>
              <option value="EURJPY">EURJPY</option>
</select>
<iframe src="chart.html" id="content" >

</iframe>
  </body>
</html>

<强> chart.html

<html>
  <head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script>
    function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var fx = getParameterByName('value');
      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
    }); 
    </script>
  </head>
  <body>
  </body>
</html>

以下是我创建的一个 Demo 的掠夺者。

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

How can I get query string values in JavaScript?

锄头有帮助：）

Answer 2

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

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

Answer 3

为我工作：

我的html代码：

<div class="dropdown no-arrow">
  <select id="my_stocks" class="form-control">
    <option value=" ">Select Stock</option>
    <option value="AAPL">AAPL</option>
    <option value="TSLA">TSLA</option>
  </select>
</div>
<div class="card-body">
  <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container tech_analysis">
  <div id="tradingview_3418f"></div>
  <div class="tradingview-widget-copyright">
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%", 
"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,
"container_id": "tradingview_3418f"
});
</script>
</div>
<!-- TradingView Widget END -->
</div>

我的Jquery：

<script>
$(document).on('change','#my_stocks',function(){
  var stock_selected = $(this).val();
  var fxWidget = new TradingView.widget({
    "width": "100%", 
    "height" : 610,
    "symbol": "NASDAQ:"+stock_selected,
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "Light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_3418f"
  }); 
});
</script>

TradingView小部件替换整个HTML正文

3 个答案: