Load external javascript through script tag

Question

I am trying load a script dynamically using script tag. But I am not able to do it.

my render method is as below

render() {
<div> 
     <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> 
     <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Working. Yipee</a> 
</div>
}

I tried to use dangerouslySetInnerHtml but that is also not working.

I require this because, the script that is mentioned uses document.writeln. So I want it to display in this current div. I have no control over the script. It come from a third party.

Check out this related link

enjoylife
– enjoylife

2016-03-07 22:15:11 +00:00
Commented Mar 7, 2016 at 22:15 — enjoylife
– enjoylife, Commented Mar 7, 2016 at 22:15
That link is not suitable for me

Abhijith Nagaraja
– Abhijith Nagaraja

2016-03-07 23:56:25 +00:00
Commented Mar 7, 2016 at 23:56 — Abhijith Nagaraja
– Abhijith Nagaraja, Commented Mar 7, 2016 at 23:56

Carlos_E. · Accepted Answer · 2019-07-29 15:07:57Z

15

I believe you could be more specific on what should be done once the script has been loaded. Something like this should suit you well:

componentDidMount() {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " /*URL Goes Here*/ ";

    document.head.appendChild(aScript);
    aScript.onload = function() {
        document.getElementById(" /*DIV ID HERE*/ ").InnerHTML = /*YOUR CODE*/;
    };
}

edited Jul 29, 2019 at 15:07

answered Mar 18, 2017 at 9:29

Carlos_E.

6808 silver badges14 bronze badges

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

Comments

Eloy Pineda · Accepted Answer · 2016-03-07 23:35:56Z

5

You can append the script tag to your body like this:

componentDidMount() {
  var addScript = document.createElement('script');
  addScript.setAttribute('src', '//verify.authorize.net/anetseal/seal.js');
  document.body.appendChild(addScript);
}
render() {
  return (
    <div>
      <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Working. Yipee</a> 
    </div>
  );
}

edited Mar 7, 2016 at 23:35

answered Mar 7, 2016 at 23:15

Eloy Pineda

2,19718 silver badges22 bronze badges

1 Comment

Abhijith Nagaraja Over a year ago

I don't want to append it body element. I want to append it so div element. if I do document.getElementById('id').appendChild(script) it will give me null exception

itereshchenkov · Accepted Answer · 2018-12-20 23:46:59Z

3

You can try to do it using Helmet, https://github.com/nfl/react-helmet

render() {
<div>
  <Helmet>
     <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" />
  <Helmet>
  <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Working. Yipee</a> 
</div>
}

answered Dec 20, 2018 at 23:46

itereshchenkov

2471 gold badge3 silver badges8 bronze badges

1 Comment

enchance Over a year ago

It's a good project but I think it needs updating. Placing the <Helmet> component in JSX shows a warning: react-dom.development.js:12466 Warning: componentWillMount has been renamed, and is not recommended for use.

Collectives™ on Stack Overflow

Load external javascript through script tag

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related