TradingView小部件替换整个HTML正文 [英] TradingView widget replacing entire HTML body
问题描述
当用户
从下拉菜单中选择一个选项时，这个小部件必须加载。 问题：小部件已加载，但会替换正文中的所有内容，从而使下拉消失。
示例：
HTML代码：
< select name =fxclass =fx>
< option value =EURUSD> EURUSD< / option>
< option value =EURJPY> EURJPY< / option>
< / select>
JS：
function changeFX（fx）{
var fxWidget = new TradingView.widget（{
width：500，
height：400，
symbol ：FX：+ fx，
间隔：1，
时区：等/ UTC，
主题：白色，
style：2，
locale：en，
toolbar_bg：＃f1f3f6，
hide_top_toolbar：true，
save_image ：false，
hideideas：true
}）;
返回themeWidget;
$（document）.on（'change'，'。fx'，function（）{
var widget = changeFX（this.value）;
//用widget做一些事情
}）;
http://jsfiddle.net/livewirerules/3e9jaLku/5
（选择下拉选项，并查看小部件加载但下拉菜单消失）
任何建议如何使下拉不会消失，仍然TradingView小部件加载？
从小部件网站出来。无论发生什么，它都是如何工作的。因此，这要按照你想要的方式行事。你将不得不使用iframe。在index.html中创建一个单独的文件，如chart.html，并将iframe的src作为chart.html。在更改上，甚至可以使用查询参数更改框架的src，然后在chart.html中读取该查询参数并创建图表。以下是供您参考的代码。
index.html
< HTML>
< head>
< link rel =stylesheethref =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 =fxclass =fx>
< option value =EURUSD> EURUSD< / option>
< option value =EURJPY> EURJPY< / option>
< / select>
< iframe src =chart.htmlid =content>
< / iframe>
< / body>
< / html>
chart.html
< html>
< head>
< script type =text / javascriptsrc =https://s3.tradingview.com/tv.js>< / script>
< script>
函数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，
间隔：1，
时区：等/ UTC，
主题：白色，
样式：2，
locale：en，
toolbar_bg：＃f1f3f6，
hide_top_toolbar：true，
save_image：false，
hideideas ：true
}）;
< / script>
< / head>
< body>
< / body>
< / html>
以下是一个重要的 演示 我创建了。
我用于代码的链接获取查询参数。
锄头帮助：）
Trying to add TradingView widget into my website.
This widget must load when user select an option from a dropdown.
Issue: The widget loads, but it replaces everything in the body and thereby the dropdown disappear.
Example:
HTML Code:
<select name="fx" class="fx">
<option value="EURUSD">EURUSD</option>
<option value="EURJPY">EURJPY</option>
</select>
JS:
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 (select dropdown option, and see widget loads but dropdown disappears)
Any advice how to make the dropdown doesn't disappear and still TradingView widget load?
So what i can make out from the widgets website. Whatever is happening is how it works. So for this to behave the way you want. You will have to use a iframe. in your index.html and create a separate file say chart.html and give the src of the iframe as chart.html. And on change even change the src of the frame with a query parameter and read that query parameter in your chart.html and create the chart. Below is the code for your reference.
index.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>
chart.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>
Here is a plunker Demo i have created.
The link that i used for the code to get queryparameters.
How can I get query string values in JavaScript?
Hoe it helps :)
这篇关于TradingView小部件替换整个HTML正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
