TradingView小部件替換整個HTML正文

試圖將TradingView widget添加到我的網站。這個小部件必須在用戶select下拉選項中加載。TradingView小部件替換整個HTML正文

問題：小部件加載，但它會替換正文中的所有內容，從而下拉消失。

例：

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並顯示無代碼的問題不會被接受。你應該執行一個重要的編輯。 – mkluwe

@mkluwe：將相關代碼添加到問題中。 – Zeigeist

@Zeigeist看看我發佈的答案。如果能解決您的問題，請不要忘記註冊並接受。 :) – 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我已經建立。

我用於獲取查詢參數的代碼的鏈接。

How can I get query string values in JavaScript?

鋤頭它有助於:)

來源

2017-01-14 17:13:11 Manish