Javascript TradingView小部件替换整个HTML正文_Javascript_Jquery_Html

Javascript TradingView小部件替换整个HTML正文

javascript jquery html

Javascript TradingView小部件替换整个HTML正文,javascript,jquery,html,Javascript,Jquery,Html,正在尝试添加到我的网站。当用户从下拉列表中选择选项时，必须加载此小部件问题：小部件加载，但它替换了主体中的所有内容，因此下拉列表消失例如： HTML代码： <select name="fx" class="fx"> <option value="EURUSD">EURUSD</option> <option value="EURJPY">EURJPY</option> </select> 选择下拉选

正在尝试添加到我的网站。当用户从下拉列表中选择选项时，必须加载此小部件

问题：小部件加载，但它替换了主体中的所有内容，因此下拉列表消失

例如：

HTML代码：

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

选择下拉选项，并查看小部件加载但下拉菜单消失

如何使下拉列表不会消失，并且仍然可以加载TradingView小部件？

因此我可以从小部件网站了解到什么。无论发生什么，都是它的工作原理。因此，这是你想要的行为方式。您必须使用iframe。在index.html中创建一个单独的文件，比如chart.html，并将iframe的src设置为chart.html。在更改时，甚至可以使用查询参数更改框架的src，并在chart.html中读取该查询参数并创建图表。下面是代码供您参考

index.html

chart.html

这是我创造的一个打劫者

我用于代码获取queryparameters的链接

Hoe it help:

当然太晚了，但是您可以使用参数容器id来选择放置图形的位置

来源：

我的工作：

我的html代码：

我的Jquery：

关于JDFIDLE和没有显示代码的问题不被接受。您应该进行一次主要编辑。@mkluwe:为问题添加了相关代码。@Zeigest请看一下我发布的答案。如果问题解决了，别忘了投票并接受@曼尼什：谢谢你的详细回答，它像一个魅力。只是为了澄清。容器div的id必须与小部件的container_id属性相同，才能正常工作。

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.

});

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

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

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

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