TradingView Widget ersetzt den gesamten HTML-Body

Versuchen, TradingView widget in meine Website hinzuzufügen. Dieses Widget muss geladen werden, wenn Benutzer select eine Option aus einem Dropdown-Menü enthält.TradingView Widget ersetzt den gesamten HTML-Body

Problem: Das Widget lädt, aber es ersetzt alles im Körper und dadurch verschwindet das Dropdown.

Beispiel:

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 (Drop-Down-Option auswählen, und Widget lädt sehen aber Dropdown verschwindet)

Irgendwelche Ratschläge wie man das Dropdown-Menü nicht verschwinden lässt und trotzdem TradingView-Widget lädt?

Quelle

2017-01-14 Zeigeist

Fragen beziehen keinen Code jdfiddle und zeigt auf SO nicht akzeptiert. Sie sollten eine größere Bearbeitung vornehmen. – mkluwe

@mkluwe: der Frage der zugehörige Code hinzugefügt. – Zeigeist

@Zeigeist einen Blick auf die Antwort von mir geschrieben. Vergessen Sie nicht zu upvote und akzeptieren Sie, wenn es Ihr Problem löst. :) – Manish

Also was kann ich aus der Widgets-Website ausmachen. Was auch immer passiert ist, wie es funktioniert. Um sich so zu verhalten, wie du es willst. Sie müssen einen iframe verwenden. in Ihrer index.html und erstellen Sie eine separate Datei say chart.html und geben Sie die src des iframe als chart.html. Und bei Änderung ändern Sie sogar die src des Rahmens mit einem Abfrageparameter und lesen Sie diesen Abfrageparameter in Ihrer chart.html und erstellen Sie das Diagramm. Unten ist der Code für Ihre Referenz.

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>

ist hier ein Plunker Demo i erstellt haben.

Der Link, den ich für den Code verwendet habe, um Abfrageparameter abzurufen.

How can I get query string values in JavaScript?

Hoe es hilft :)

Quelle

2017-01-14 17:13:11 Manish