CODEWITHSUNDEEP
javascripthtml
dang
dang

Reputation: 2412

Capture parameter from URL and set in HTML

I have the following HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stocks</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
    <link rel="stylesheet" href="./style/style.css" />
  </head>
  <body>
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->

        <!-- Slide 1 -->
        <div class="swiper-slide">
          <div class="widget-container">
            <div class="tradingview-widget-container">
              <div class="tradingview-widget-container__widget"></div>
              <script
                type="text/javascript"
                src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js"
                async
              >

                {
                  "symbol": "BSE:INFY",
                  "width": "100%",
                  "locale": "in",
                  "colorTheme": "light",
                  "isTransparent": false
                }
              </script>
            </div>

          </div>
        </div>

    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script src="./js/index.js"></script>

    <script></script>
  </body>
</html>

I would like to pass "symbol": "BSE:INFY" through URL like -- http://example.com?symbol=BSE:INFY OR http://example.com?symbol=BSE:APLAPOLLO

The text which I pass in symbol in URL, it should get replaced in HTML code -- "symbol": "BSE:INFY"

How can I pass symbol through URL, capture it and set in HTML above?

Upvotes: 0

Views: 355

Answers (3)

Jovylle
Jovylle

Reputation: 961

If you can do it on PHP(serverside) do below

If you use these links http://example.com?symbol=BSE:INFY http://example.com?symbol=BSE:APLAPOLLO

You can access the symbol variable as get request on serverside so that you can use it as below

            {
              "symbol": "<?php echo $_GET['symbol'];?>",
              "width": "100%",
              "locale": "in",
              "colorTheme": "light",
              "isTransparent": false
            }

If not, Use URL Hash(Client side HTML and JS only)

This will be your links: http://example.com#BSE:APLAPOLLO http://example.com#BSE:INFY

then in your script you will use

        {
          "symbol": window.location.hash.substring(1),
          "width": "100%",
          "locale": "in",
          "colorTheme": "light",
          "isTransparent": false
        }

Upvotes: 1

mplungjan
mplungjan

Reputation: 177950

You are too late if the script is reading the parameters from the embedded script. You would need to do something like this

Remember to change my demo string

const usp = new URLSearchParams("?symbol=BSE:INFY")

to 

const usp = new URLSearchParams(location.search);

on your page

<div class="widget-container">
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
  </div>
</div>
<script>
  const usp = new URLSearchParams("?symbol=BSE:APLAPOLLO") // new URLSearchParams(location.search); // on your page
  document.write(`<script src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js">{"symbol": "${usp.get("symbol")}", "width": "100%","locale": "in", "colorTheme": "light", "isTransparent": false }<\/script>`)
</script>

This does not work because the script does not like the object inside the script tags.

That is a shame because it is better code.

<div class="widget-container">
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
  </div>
</div>
<script>
  const usp = new URLSearchParams("?symbol=BSE:INFY") // new URLSearchParams(location.search); // on your page
  const scr = document.createElement("script");
  scr.innerText = `{"symbol": "${usp.get("symbol")}", "width": "100%","locale": "in", "colorTheme": "light", "isTransparent": false }`
  document.querySelector("head").appendChild(scr);                        
  scr.src = "https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js"

</script>

Upvotes: 1

Mirkuzzz
Mirkuzzz

Reputation: 68

You can use simple javascript apis:

const queryParams = new URLSearchParams(window.location.search)
const symbol = queryParams.get('symbol')

Upvotes: 0

Related Questions