此问题在此处已有答案:
Cross domain iframe issue(5个答案)
3小时前关门了。
我尝试访问一个TradingView股票图表小部件(https://www.tradingview.com/widget/advanced-chart/),它加载在iframe中。目标是在加载后以编程方式在小部件的canvas标签上绘制,但我收到以下错误:
已阻止源为“http://localhost:3000”的帧访问跨源帧
我基本上尝试了所有的答案:How to enable cors nodejs with express?,但我认为这可能是一个不同的上下文比试图访问一个iframe。我看到了一些其他信息使用postMessage
,但我也不认为这是相关的与HTML元素交互。
下面是完整的代码,它是draw
函数中产生错误的最后一行。
索引.js
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors())
app.get('/', (req, res, next) => {
res.sendFile(__dirname + '/index.html');
});
app.get('/test', (req, res, next) => {
res.send("success")
});
const port = 3000
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
索引.html
<html>
</script>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="technical-analysis-chart-demo"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL stock chart</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"container_id": "technical-analysis-chart-demo",
"width": "100%",
"height": "100%",
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"style": "1",
"toolbar_bg": "#f1f3f6",
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"studies": [
"ROC@tv-basicstudies",
"StochasticRSI@tv-basicstudies",
"MASimple@tv-basicstudies"
],
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"locale": "en"
}
);
</script>
</div>
<!-- TradingView Widget END -->
<script>
function draw() {
var elem = document.querySelector('#technical-analysis-chart-demo > div > div > iframe');
console.log(elem.contentWindow)
console.log(elem.contentWindow.querySelector("div"))
}
window.setTimeout(draw, 3000);
</script>script>
</html>
我想知道是否有一个解决方案,如果没有,我想知道是否可以覆盖另一个画布上的小部件,但仍然允许用户与小部件在同一时间进行交互。
1条答案
按热度按时间fnx2tebb1#
这似乎是一个CSP的问题,他们已经指定了哪些域可以以何种方式交互,并且不允许您的内联脚本与iframe交互,所以这个解决方案是不可能的。
我对iframe不太熟悉,无法回答您是否可以使用覆盖并将事件传递给iframe的问题。我可能会调查数据来自何处,以及是否可以通过跨域调用没有任何问题的端点获得数据,并自己制作这个 Jmeter 板。