如何通过 URL 将值传递给 Html 页面（包含 js 片段）？

Question

我正在使用基于 Flutter 的低代码平台来开发我的应用程序，该平台具有内置小部件，例如（WebView 小部件“接受 URL”）并计划使用它来显示 Tradingview Widgets

平台

小部件

singalticker.html代码

<!-- 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 -->

所以，我设法在 GitHub 中创建了一个 html 页面并发布了它，然后将它的 URL 放在 WebView 及其作品中，但我问的是什么就是如何通过URL传递一个值来改变pair

"symbol": "FX:EURUSD",

所以当用户选择一对（Stock/Fiat）时，html页面的变化取决于什么？我在这里尝试了多种解决方案，但没有任何效果！

如有任何帮助，我们将不胜感激，谢谢

Answer 1

有了这个，您可以从 URL 字符串中获取查询变量；

// 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]);
    }
}

使用方法：

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

更新 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>

如何通过 URL 将值传递给 Html 页面（包含 js 片段）？

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

html

javascript