How to Pass value through URL to Html page (contain js snippet)?

Question

I'm using Low-code platform based on Flutter to develop my app and that platform have Built-in widgets such as (WebView widget "accepts URL") and planning to use it to display Tradingview Widgets

Platform

The widget

singalticker.html Code

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/EURUSD/?exchange=FX" rel="noopener" target="_blank"><span class="blue-text">EURUSD Rates</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
  {
  "symbol": "FX:EURUSD",
  "width": 350,
  "colorTheme": "light",
  "isTransparent": false,
  "locale": "en"
}
  </script>
</div>
<!-- TradingView Widget END -->

So, I've managed to create a html page in GitHub and publish it and then placed its URL in the WebView and its works BUT what I'm asking is how to pass a value through the URL to change the pair

"symbol": "FX:EURUSD",

so when the user choose a pair of (Stock/Fiat) the html page changes depends on that ? I've tried following multiple solutions here but nothing works !

Any help in this matter will be appreciated thanks

Why you cant use query params? Then parse them with JS when document is loaded? Like ...? Symbol=FX:eurusd — hamaronooo
– hamaronooo, Commented May 30, 2022 at 6:29
you can look in window.location direction developer.mozilla.org/en-US/docs/Web/API/Window/location — I-vasilich-I
– I-vasilich-I, Commented May 30, 2022 at 6:29
thanks for responding .... I've tried the what you've suggested BUT once I change the code between the brackets {} in the script it doesn't work... I've added these lines to my code const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries()); "symbol": params.pairs, But the result is the widget resetting to the default stats which means it didn't works ! — Nasser
– Nasser, Commented May 30, 2022 at 7:45
@hamaronooo @ I-vasilich-I I'm not expert in Html or Javascript...any help is needed — Nasser
– Nasser, Commented May 30, 2022 at 7:46

hamaronooo · Accepted Answer · 2022-05-30 09:23:41Z

1

With this you can get query variable from URL string;

// add this function in your page script
function GetQueryVar(variable) {
    var query = window.location.search.substring(1)
    var vars = query.split('&')
    for (var i = 0; i < vars.length; i++) {
        var qPair = vars[i].split('=');
        if (decodeURIComponent(qPair[0]).toLowerCase() == variable.toLowerCase())
            return decodeURIComponent(qPair[1]);
    }
}

How to use:

// url is: https://siteurl.com/page?fx=EURUSD
const fx = GetQueryVar('FX') // fx == 'EURUSD'

UPDATE 1

<body>
    <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        <div class="tradingview-widget-copyright" id="view"></div>
    </div>
    <script type="text/javascript">
        function getParameterByName(name, 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, ' '));
        }
        const container = document.getElementById("view")
        const symbol = getParameterByName('fx')
        document.addEventListener('DOMContentLoaded', function () {
            var iframe = document.createElement('iframe')
            iframe.setAttribute(
                'src',
                `https://s.tradingview.com/embed-widget/single-quote#{"width":350,"symbol":"FX:${symbol}","isTransparent":false,"height":126,"utm_source":"","utm_medium":"widget","utm_campaign":"single-quote"}`,
            );
            iframe.setAttribute('scrolling', 'no')
            iframe.setAttribute('allowtransparency', 'true')
            iframe.setAttribute('frameborder', 0)
            iframe.setAttribute('style', 'box-sizing: border-box; height: calc(94px); width: 350px;')
            container.appendChild(iframe)
        });
    </script>
    </div>
</body>

edited May 30, 2022 at 9:23

answered May 30, 2022 at 7:52

hamaronooo

5734 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nasser Over a year ago

Hi...I've tried your code and its working with demo script But it doesn't work with the tradingview script that I shared above .. when I add any line inside the tradingview script "Between the Brackets {}" it doesn't execute!!! ..... I've also tried to create a separate script above the tradingview script and put inside of it the function and call it in tradingview script still doesn't work !!

hamaronooo Over a year ago

@Nasser you should to configure all that HTML block provided in question dynamically from your custom script on document loaded.

Nasser Over a year ago

really appreciate your help but I'm not expert in html so I don't know what you did meant by that ,,, Can you give a hint about it !?

hamaronooo Over a year ago

@Nasser have high load right now, will write you solution in 1 hour

hamaronooo Over a year ago

@Nasser Check UPDATE 1

|

Collectives™ on Stack Overflow

How to Pass value through URL to Html page (contain js snippet)?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related