当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - TradingView widget replacing entire HTML body

问题描述:

Trying to add TradingView widget into my website.

This widget must load when user select an option from a dropdown.

Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.

Example:

HTML Code:

<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

(select dropdown option, and see widget loads but dropdown disappears)

Any advice how to make the dropdown doesn't disappear and still TradingView widget load?

网友答案:

So what i can make out from the widgets website. Whatever is happening is how it works. So for this to behave the way you want. You will have to use a iframe. in your index.html and create a separate file say chart.html and give the src of the iframe as chart.html. And on change even change the src of the frame with a query parameter and read that query parameter in your chart.html and create the chart. Below is the code for your reference.

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>

Here is a plunker Demo i have created.

The link that i used for the code to get queryparameters.

How can I get query string values in JavaScript?

Hoe it helps :)

分享给朋友:
您可能感兴趣的文章:
随机阅读: