Im trying to add JWPlayer to my React component, i know in a static/server rendered webpage you can simply add the script tag, and then you can use the component but in react its a different story.
for example in a server rendered language like php rendering a JWPlayer component looks as follows:
<script src="location of jwplayer library cdn"></script>
</head>
<body>
<div id="myElement"></div>
<script type="text/JavaScript">
jwplayer("myElement").setup({
"playlist": [{
"file": "<?php echo $videourl; ?>"
}]
});
</script>
this is easy, and there is ample documentation on how to make this work. but i want to be able to use the CDN from JWPlayer in react as well, and the most popular react package has been deprecated, and is no longer being supported. I feel like i should be able to add to the DOM the cdn, and then be able to use that to be able to finish the rest of this.
for example i have:
useEffect(() => {
const JWPlayerScript = async () => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "location of jwplayer library cdn";
script.async = true;
document.body.appendChild(script);
};
JWPlayerScript()},[])
This works, however i still dont have access to any of the javascript in the cdn, my console just keeps stating that jwplayer() has not been defined, and its correct. it hasnt but i dont know how to extract that from the cdn to gain access to those javascript functions.
Related
I'm creating a component to be included in a big React project, this component loads a group of script tags that looks like
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXX;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"/>
</div>
</noscript>
I can't change the contents of this script in anyway, so now I'm using dangerously-set-html-content npm package to add & execute those scripts successfully, but then I get the following console warning:
conversion.js:29 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
Of course I wish I could tell google to remove that from the code... but, sadly they won't do it, so I would like to know how to be able to load this kind of scripts and make them work.
I tried changing <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" async></script> as other people suggested but the warning continues.
You can use react-helmet to push the tag from your component.
You can import any script to your react project like this:
loadScript = () => {
const script = document.createElement("script");
script.src = "https://yourlink.js";
script.async = true;
document.body.appendChild(script);
}
and call this function inside useEffect or componentDidMount method
JS example:
<script src="{{ url_for('static', filename='scripts/openchat.js') }}"></script>
I've noticed that when i inspect source in web browser i see some of website like this myscript.js?er2dfsdsfsdf44455230099
my file structure
i did lots of google, but i can't found any proper answer.
can anyone help on this.
I think creating the scripts tag dynamically could help you. Please try this
<script>
document.addEventListener("DOMContentLoaded", () => {
const filenames = ["myscript.js", "myotherscript.js"];
const body = document.body;
for (const filename of filenames) {
const script = document.createElement("script");
script.src = `${filename}?${Date.now()}`;
script.type = "javascript";
body.appendChild(script);
}
});
</script>
I think maybe you just need to hard reload your web browser. Search on the internet how to hard reload you're web browser. Because I don't know your browser I can't tell you right now.
because of i am using flask url_for method to call JS files, so i found a manual solution for adding version in my JS or CSS files. I found this
<script src="{{ url_for('static', filename='scripts/openchat.js' , v='14') }}"></script>
but i want to find automate method for this thank you for support.
I am trying to add a Trustpilot TrustBox to a Next.js app.
I have this in my componentDidMount:
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
This in my Head:
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
And this in my html:
<div id="trustbox" className="trustpilot-widget" data-locale="en-GB" data-template-id="XX" data-businessunit-id="XX" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="5" data-schema-type="Organization">
Trustpilot
</div>
This works fine on hot reload. E.g. if I add the code while the server is running. But o fresh re-load it breaks and I get the following error:
Cannot read property 'loadFromElement' of undefined
Any ideas?
Figured it out. You need the following code in componentDidMount to ensure the external js is loaded first.
componentDidMount() {
var aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
aScript.async = "true"
document.head.appendChild(aScript);
aScript.onload = function () {
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
};
}
Hope this helps anyone stuck with the same thing.
For future readers, Trustpilot has now a documentation for single page apps that you can find here
I was wondering why nothing was rendered even with their official documentation but after 2 hours of pain I found out that (at the time i am writing this) you can't load their widget on the Brave navigator...
I want to use handlebars on the client side. In my html code I have calls like:
<img src="data/cloud/products/{{key}}/{{images.product.frontal.trans_bg_img}}" alt="">
directly in my index.html.
In javascript I do something like this:
this.emptyPageSource = $("#productdetail").html();
this.productTemplate = Handlebars.compile(this.emptyPageSource);
var html = this.productTemplate(product);
$("#productdetail").html(html);
which works fine. I take the existing piece of html from the dom as a template once, then apply the templating with handlebars and overwrite the old dom entry.
When I load the page, I get a lot of 404 requests, because the browser already tries to load the image resources, even if the templating wasn't invoked yet, due to the JS part.
Is there a way to evade the 404 get requests? (I'm not using angular or something alike - just plain js + jquery)
Thank you in advance
Chris
I will try converting #productdetail element to <script type='text/template' id='productdetail'>. As in: JSBin
<h1>A Cat</h1>
<script type="text/template" id="productdetail">
<img src="{{image}}" alt="">
</script>
Rest of it
<script>
var product = {
key: '1',
image: 'https://media.giphy.com/media/freTElrZl4zaU/giphy.gif'
}
var emptyPageSource = $("#productdetail").html();
var productTemplate = Handlebars.compile(emptyPageSource);
var html = productTemplate(product);
$("#productdetail").replaceWith(html);
</script>
The browser does not understand text/template scripts and just ignores its. But we can read the content inside our script tag use it as a template.
I want to embed a script tag provided by a third party ad service into my react app. It is like a Github gist. It should run the script and write a <iframe> inside the HTML to show the ads.
The official scripts are something like this:
<script type="text/javascript">
var cpro_id = "uXXXXXXXX";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>
I tried to put the first script tag in the template HTML, and put the second in the component I need it to be, like this:
...
componentDidMount () {
let g = document.createElement ('script');
g.setAttribute ('src','http://cpro.baidustatic.com/cpro/ui/c.js');
React.findDOMNode (this.refs.ad).appendChild (g);
},
render() {
return <div ref='ad'></div>;
}
...
Unfortunately, it failed and throw this error: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
I tried ReactScriptLoader and it gave me the same error.
I tried dangerouslysetinnerhtml={{__html: '<script src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>'}}, but failed.
I tried to study the code of c.js file and change all document.write to innerHTML=..., but failed.
Can anyone help? Thanks!