43

Im not sure if this has been asked before or anybody has encountered the same issue on reactjs. So the scenario is like this, I have an index.html file that includes some javascript. Now on my react component, I have a condition that will render only if the condition is true. This means that initially when my page loaded the component has not been rendered yet. When I toggle a button this is where that component gets rendered. That child component needs to call a javascript method that was included on my index.html. How should I do this?

Any help is greatly appreciated.

Improve this question

5 Answers 5

Reset to default
93

In index.html

<script type="text/javascript">
  function test(){
    alert('Function from index.html');
  }
</script>

In your component

componentWillMount() {
  window.test();
}

2022 Typescript edit:

Create a file global.d.ts like so (doc):

interface Window {
  test: () => void;
}

✔

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

5 Comments

external methods how to call pls tell me
This does not work. "window.test()" is flagged as unknown by typescript and will not compile.
Working perfect just now !
window is not recignzed in typescript
To get this working in TypeScript, add //@ts-ignore above any JavaScript line of code that TypeScript doesn't like (where types for e.g. window are not defined within its scope) and the TypeScript compiler will ignore these / the program should run without issue
16

Try this solution to call global functions from React with TypeScript enabled:

Either in index.html or some_site.js

function pass_function(){
  alert('42');
}

Then, from your react component:

window["pass_function"]();

And, of course, you can pass a parameter:

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert(`passes parameter: ${someval}`);
}
Improve this answer

1 Comment

I received the following error trying to implement this: Element implicitly has an 'any' type because index expression is not of type 'number'. To fix this you have to cast window as such (window as { [key: string]: any})["pass_function"]()
3

So either you define the method on global scope (aka window). And then you can use it from any methods, being React or not.

Or you can switch to module based paradigm and use require/import to get the module and use the function.

For bigger projects the latter is better as it's scales, while if you need a demo or POC you can certainly hook all to global scope and it will work.

More information about modules is at: http://exploringjs.com/es6/ch_modules.html

Improve this answer

Comments

1

for typescript users, try this:

declare global {
    interface Window {
        externalMethod: (params: any) => void;
    }
}

then you would be able to call it like this in your react component

window.externalMethod(params)
Improve this answer

Comments

0

You can attached your method to the global window object and than use it like that in your component:

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>

howItWorks = () => {
  window.HowItWorksVideo();
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.