如何调整嵌入的TradingView组件右侧详情面板宽度？

你遇到的问题根源是浏览器同源策略限制：右侧详情面板的.layout__area--right元素位于TradingView的iframe内部，外部页面的CSS无法直接穿透跨域iframe生效。以下是两种可行的解决方法：

方法1：使用官方支持的自定义CSS（推荐） #

TradingView Widget提供了custom_css_url参数，允许加载你自己的自定义样式文件来覆盖默认样式，这是官方认可的方式，不会有跨域问题。

操作步骤： #

1. 创建自定义CSS文件：在你的服务器上新建一个CSS文件（比如命名为tradingview-custom.css），写入以下样式（宽度值可根据需求调整）：

.layout__area--right {
    width: 350px !important;
    min-width: 300px !important;
}

2. 修改Widget配置：在你现有的TradingView Widget初始化代码中，添加custom_css_url参数，指向你刚才创建的CSS文件地址：

修改后的完整代码：

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_93c62"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height": "700",
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "2",
"locale": "en_EN",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"hide_legend": true,
"save_image": false,
"details": true,
"container_id": "tradingview_93c62",
"custom_css_url": "https://你的域名/tradingview-custom.css" /* 新增自定义样式参数 */
}
);
</script>
</div>
<!-- TradingView Widget END -->

注意：确保你的CSS文件可以被TradingView的iframe跨域访问，需要在服务器上配置好CORS规则（允许tradingview.com域名访问）。

方法2：通过Widget回调注入样式（备选） #

如果无法使用自定义CSS URL，可以利用TradingView的onChartReady回调，在图表加载完成后尝试注入样式。不过这种方法依赖于TradingView的内部DOM结构，可能会随版本更新失效：

在Widget配置中添加回调函数：

new TradingView.widget({
    // 原有配置参数...
    "onChartReady": function() {
        // 获取iframe元素
        const iframe = document.querySelector('#tradingview_93c62 iframe');
        if (iframe && iframe.contentDocument) {
            // 创建样式标签并注入
            const style = document.createElement('style');
            style.textContent = `.layout__area--right { width: 350px !important; min-width: 300px !important; }`;
            iframe.contentDocument.head.appendChild(style);
        }
    }
});

注意：这种方法可能会因为跨域安全限制失败，仅在特殊场景下尝试使用。

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