You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

嵌入的TradingView组件在XAMPP中无法显示的问题咨询

解决XAMPP环境下TradingView嵌入图表不显示的问题

我遇到过不少开发者碰到这个问题,本质是本地file://协议和XAMPP的http://服务器环境之间的差异导致的,给你几个实用的排查方向和解决办法:

  • 先看浏览器控制台的错误日志
    这是最快定位问题的方法!在XAMPP环境下打开页面后,按F12打开开发者工具,切换到「Console」标签,看看有没有红色报错:

    • 如果是CORS相关错误:大概率是浏览器的扩展(比如广告拦截、隐私插件)拦截了TradingView的远程资源,先禁用所有扩展再试;也可能是XAMPP的Apache配置无意中限制了外部资源加载,检查httpd.conf里有没有相关的跨域限制规则。
    • 如果是404错误:说明某个本地资源(比如你自定义的CSS/JS)的路径在HTTP环境下不对,要改成相对于服务器根目录的路径(比如把../css/style.css改成/myproject/css/style.css,前提是你的文件在htdocs的myproject文件夹下)。
    • 如果是脚本执行错误:可能是你的Widget配置里有和HTTP环境不兼容的参数,比如引用了file://协议的本地资源,要改成HTTP路径。
  • 确保通过HTTP协议访问页面
    一定要把你的PHP/HTML文件放在XAMPP的htdocs目录下,然后用http://localhost/你的文件名.php(或.html)访问,绝对不能直接双击文件用file://打开——这两个环境的资源加载规则完全不同,很多远程脚本在file://下能跑,但在HTTP环境下需要符合跨域规则。

  • 验证TradingView脚本的完整性
    检查你的嵌入代码里是否正确引入了官方的Widget脚本:

    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    

    这个脚本必须是完整的远程链接,不能改成本地文件。另外,确保XAMPP服务器能正常访问外部网络——可以试试在浏览器直接打开https://s3.tradingview.com/tv.js,看能不能正常加载脚本内容。

  • 用最简示例代码测试
    把你的原代码替换成TradingView官方的最简示例(如下),放到htdocs下的test.html里,用http://localhost/test.html访问:

    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
      <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
      <script type="text/javascript">
      new TradingView.widget(
      {
        "width": 980,
        "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_abc123"
      }
      );
      </script>
    </div>
    <!-- TradingView Widget END -->
    

    如果这个示例能正常显示,说明你的原代码配置有问题,比如自定义的参数、容器ID冲突等;如果还是不行,那就是XAMPP的环境问题,要检查Apache的运行状态、防火墙是否拦截了服务器请求。

  • 清除缓存并禁用扩展
    有时候浏览器缓存的旧脚本会导致异常,按Ctrl+Shift+R强制刷新页面清除缓存;同时禁用广告拦截、隐私类浏览器扩展,这些插件经常会误拦截TradingView的资源。

内容的提问来源于stack exchange,提问作者Piash

火山引擎 最新活动