HTMLビュー全体を交換するTradingViewウィジェット

TradingView widgetを私のウェブサイトに追加しようとしています。このウィジェットは、ユーザーselectの場合はドロップダウンからオプションをロードする必要があります。HTMLビュー全体を交換するTradingViewウィジェット

問題：ウィジェットが読み込まれますが、本文内のすべてが置き換えられ、ドロップダウンが消えます。

例：

HTMLコード：

<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 （ドロップダウンオプションを選択して、ウィジェットの負荷が、ドロップダウンが消え参照）

どのようにアドバイスをドロップダウンを消すことはありませんし、まだTradingViewウィジェットの負荷ですか？

出典

2017-01-14 Zeigeist

質問jdfiddleを参照しないコードを示さないが、SOで受け入れられていません。あなたは大きな編集を行うべきです。 – mkluwe

@mkluwe：質問に関連するコードを追加しました。 – Zeigeist

@Zeigeistは私が投稿した回答を見ています。あなたの問題を解決するなら、upvoteと了承を忘れないでください。 :) – Manish

私はウィジェットのウェブサイトから何を作ることができますか？起こっていることは、どのように動作するかです。これがあなたが望むように行動するためです。あなたはiframeを使用する必要があります。あなたのindex.htmlに、chart.htmlと言う別のファイルを作成し、iframeのsrcをchart.htmlとして与えてください。また、変更するには、クエリパラメータを使用してフレームのsrcを変更し、chart.htmlでそのクエリパラメータを読み取り、グラフを作成します。以下は参考用のコードです。ここで

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>

は私が作成したplunker Demoです。

私はコードでqueryparametersを取得するために使用したリンクです。

How can I get query string values in JavaScript?

ことができます:)

出典

2017-01-14 17:13:11 Manish