Question 298719 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Loading Widget in HTML with Param from Browser

I have a widget that I have hosted. I am able to successfully call it, and it loads. But When I am trying to pass it params from browser its not loading. The main difference is how I am calling the script.

The following code works but then its hard coded params

<div id="idealy_widget"></div>
  <link href="https://xxxxxxxx/jscript/index.css" rel="stylesheet"/>
   <script id="widget-params" src="https://xxxxxxxxx/jscript/index.js" 
  clientId="xxxxxxxxxxxxxxxxxxxxx" 
  clientSecret="xxxxxxxxxx" 
   username="xxxxxxxxxxxxx"
    product_id="xxxxxxxxxx" type="module">
</script>

The following code doesnt work. it doesnt show the form which is part of the widget. It print the params.

    <div id="idealy_widget"></div>
  <script type="module">
    const clientId = new URLSearchParams(window.location.search).get('clientId');
    const clientSecret = new URLSearchParams(window.location.search).get('clientSecret');
    const username = new URLSearchParams(window.location.search).get('username');
    const product_id = new URLSearchParams(window.location.search).get('product_id');
    
    console.log('Params:', clientId, clientSecret, username, product_id);

    const widgetScript = document.createElement('script');
    widgetScript.src = `https://xxxxxxxxxxxxx/jscript/index.js?clientId=${clientId}&clientSecret=${clientSecret}&username=${username}&product_id=${product_id}`;
    widgetScript.type = 'module';
    widgetScript.id = 'widget-params';

    widgetScript.onload = () => {
      console.log('Script loaded successfully');
      // You may not need to manually call initWidget since it's called internally in index.js
    };

    document.head.appendChild(widgetScript);
  </script>
Tags:

2

Answers


  1. 0

    I think your problem is how to transform params form a script typeof module

    //   jscript/index.js
console.log(import.meta.url)
//   output: http://127.0.0.1:5500/index.js?clientId=x&clientSecret=xx&username=xxx&product_id=xxxx
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>

<body>
  <script id="widget-params" src="https://xxxxxxxxx/jscript/index.js?clientId=x&clientSecret=xx&username=xxx&product_id=xxxx" type="module">
  </script>
</body>


</html>
    Login or Signup to reply.
  2. 0

    The following code doesnt work.

    That’s probably because you made it do something completely different, than what the original code contained.

    widgetScript.src = `https://xxxxxxxxxxxxx/jscript/index.js?
    clientId=${clientId}&clientSecret=${clientSecret}&username=
    ${username}&product_id=${product_id}`;

    You are adding all those parameters to the script URL here – but that is not what was in the original code. In that, these were set as attributes on the script element – so presumably, you need to add them to your dynamically added script element, in exactly the same way. (Unless you found it documented somewhere, that this was also supposed to work the same way, with URL parameters?)

    const widgetScript = document.createElement('script');
widgetScript.src = 'https://xxxxxxxxxxxxx/jscript/index.js';
widgetScript.type = 'module';
widgetScript.id = 'widget-params';
widgetScript.setAttribute('clientId', clientId);
widgetScript.setAttribute('clientSecret', clientSecret);
widgetScript.setAttribute('username', username);
widgetScript.setAttribute('product_id', product_id);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search