问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

TradingView 小部件替换整个 HTML 正文

社区维基
1
新手上路，请多包涵

尝试将 TradingView 小部件 添加到我的网站中。此小部件必须在用户 select 下拉列表中的选项时加载。

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

示例：

HTML 代码：

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

记者：

 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 小部件的任何建议？

原文由 Zeigeist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtml
阅读 440
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

索引.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>

图表.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>

这是我创建的一个 plunker Demo 。

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

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

锄它有帮助:)

原文由 Manish 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

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

原文由 gg0512 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题