如何在单PHP文件中跨服务器传递PHP变量至JS的symbol参数？

核心问题原因 #

TradingView的嵌入脚本是解析<script>标签内的纯JSON配置，而非执行JavaScript代码。你之前定义的var pair变量不会被脚本识别，必须直接在JSON结构中传入字符串值。

方案1：服务器端静态渲染PHP变量 #

如果select的值是通过请求（GET/POST）传递到PHP的，直接将变量注入JSON配置即可，注意用json_encode确保格式合法：

// 从请求中获取select控件的值（示例：GET参数）
$selectedSymbol = isset($_GET['symbol']) ? $_GET['symbol'] : 'FX:GBPUSD';
// 用json_encode处理变量，自动转义特殊字符，保证JSON语法正确
$encodedSymbol = json_encode($selectedSymbol);

echo '
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
    {
      "interval": "1m",
      "width": 425,
      "isTransparent": false,
      "height": 450,
      "symbol": ' . $encodedSymbol . ',
      "showIntervalTabs": true,
      "locale": "ru",
      "colorTheme": "light",
      "largeChartUrl": "https://example.com"
    }
    </script>
</div>
<!-- TradingView Widget END -->
';

方案2：前端动态更新Select控件的值 #

如果需要用户选择Select后实时更新图表，需要动态重建TradingView脚本并传入新配置：

1. 先编写HTML结构：

<select id="symbolSelector">
    <option value="FX:GBPUSD">GBP/USD</option>
    <option value="FX:EURUSD">EUR/USD</option>
    <option value="NASDAQ:AAPL">AAPL</option>
</select>
<div id="chartContainer" class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
</div>

2. 添加JavaScript交互逻辑：

// 监听Select变化事件
document.getElementById('symbolSelector').addEventListener('change', function() {
    const selectedSymbol = this.value;
    const chartContainer = document.getElementById('chartContainer');
    
    // 清空原有图表内容
    chartContainer.innerHTML = '<div class="tradingview-widget-container__widget"></div>';
    
    // 创建新的脚本标签，传入更新后的配置
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js';
    script.async = true;
    script.textContent = JSON.stringify({
        "interval": "1m",
        "width": 425,
        "isTransparent": false,
        "height": 450,
        "symbol": selectedSymbol,
        "showIntervalTabs": true,
        "locale": "ru",
        "colorTheme": "light",
        "largeChartUrl": "https://example.com"
    });
    
    chartContainer.appendChild(script);
});

// 页面加载时初始化默认图表
window.addEventListener('load', function() {
    document.getElementById('symbolSelector').dispatchEvent(new Event('change'));
});

内容的提问来源于stack exchange，提问作者Oleg Pavlenko