I have a Gatsby site that I'm trying to add a third-party js widget to but for some strange reason it will only load if I refresh the page manually. On first page load, it as is if it doesn't exist at all, no errors in dev-tools, nothing... but if I refresh the page, it then appears. It's almost as if it's lazy loading? Is there a way to force load?
I've checked the elements, console, and network tabs in dev tools but there's nothing to indicate any errors. elements shows the tags that I would expect, console shows nothing at all, and network everything shows up with 200.
Could this be an issue with Gatsby and/or Helmet, it might be but I don't think it's an issue with the widget itself (it's third-party, I have no control over it, see last paragraph)?
<Helmet
script={[
{
type: 'text/javascript',
src: '//widget-url.com/path/to/jsfile.min.js',
},
{
type: 'text/javascript',
innerHTML: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`,
},
]}
/>
In the body I then have:
<div id='widget-id'></div>
Things I've tried to attempt to understand where the issue is:
As I mentioned, I have to force refresh the page where the widget is located. If I force refresh any other page, it doesn't help. So something I tried is: rather than only including the JS into the head of the page in question, I would including it on ALL pages. But this has made no difference.
I've also tried adding the widget to a simple stand-alone html file, the widget loads without problem. Which leads me to think that it's probably not a widget issue?
I don't know where to go from here :(
The problem is that you are pointing a DOM element that may or may not be rendered at the moment your request the script.
In your case, I'd try:
<Helmet>
<script async defer src="//widget-url.com/path/to/jsfile.min.js" />
<script async defer>
{`
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`}
</script>
</Helmet>
Or using one of the multiple Server-Side Rendering APIs. onRenderBody should work:
// gatsby-ssr.js
import React from "react"
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
setHeadComponents([
<script
src="//widget-url.com/path/to/jsfile.min.js"
type="text/javascript"
async
/>,
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`,
}}
/>,
])
}
Related
In my rails app there is a JS script in partial view
const f2s = window.document.createElement("script");
f2s.defer = true;
(f2s.src = "https://face2.oktium.com/face2widget.js"),
(f2s.onload = function () {
new window.Oktium(face2params).init();
new window.Oktium(face2paramsMobile).init();
}),
document.head.appendChild(f2s);
it works fine when page load for first but when comes again from back or another page which have same code its not working. How can I work that with turbolinks?
From turbolinks docs
Working with Script Elements
Your browser automatically loads and evaluates any <script> elements present on the initial page load.
When you navigate to a new page, Turbolinks looks for any <script> elements in the new page’s <head> which aren’t present on the current page. Then it appends them to the current <head> where they’re loaded and evaluated by the browser. You can use this to load additional JavaScript files on-demand.
Turbolinks evaluates <script> elements in a page’s <body> each time it renders the page. You can use inline body scripts to set up per-page JavaScript state or bootstrap client-side models. To install behavior, or to perform more complex operations when the page changes, avoid script elements and use the turbolinks:load event instead.
Annotate <script> elements with data-turbolinks-eval="false" if you do not want Turbolinks to evaluate them after rendering. Note that this annotation will not prevent your browser from evaluating scripts on the initial page load.
Loading Your Application’s JavaScript Bundle
Always make sure to load your application’s JavaScript bundle using <script> elements in the <head> of your document. Otherwise, Turbolinks will reload the bundle with every page change.
<head>
...
<script src="/application-cbd3cd4.js" defer></script>
</head>
If you have traditionally placed application scripts at the end of <body> for performance reasons, consider using the <script defer> attribute instead. It has widespread browser support and allows you to keep your scripts in <head> for Turbolinks compatibility.
You should also consider configuring your asset packaging system to fingerprint each script so it has a new URL when its contents change. Then you can use the data-turbolinks-track attribute to force a full page reload when you deploy a new JavaScript bundle.
You can wrap your JS script inside such handler inside script tag in the head
<script defer>
document.addEventListener('turbolinks:load', () => {
// your code here
})
</script>
Also in Rails there is mechanism how to add some tags dynamically, you can add in the <head> in layout/application
<%= yield(:face2) %>
And then in your specific view
<% content_for(:face2) do %>
<script defer src="https://face2.oktium.com/face2widget.js" data-turbolinks-eval="false"></script>
<script>
document.addEventListener('turbolinks:load', () => {
new window.Oktium(face2params).init()
new window.Oktium(face2paramsMobile).init()
})
</script>
<% end %>
You should wrap your JS code inside
$(document).on('turbolinks:load', function() {
...
}
Bit of a repetition of what others have suggested, but I just wanted to stress that it was the wrapping of the functionality needed for the partial/view including variable declarations that worked for me. Initially I used the following in the erb which worked with some exceptions.
<div id="cart-counter" data-turbo-permanent>1 item</div>
This kind of worked but when user clicked button type submit on other pages, it broke again.
Tried many things, and as others have described, the following worked:
wrapped the script I needed for that view with :
document.addEventListener("turbo:load", ()=>{
// functionality
}
I'm integrating a mailerlite popup for a client's next.js project, and I'm having a difficult time converting the JavaScript snippets into the jsx required to make the popups function properly. On first load it seems to work just fine, but on relaod I'm getting the following error.
window is not defined
I've encountered the issue while dealing with DOM manipulation, but in this case, judging from the code in the snippet, I need the window object.
Install the following snippet of Javascript on every page of your website right before the closing tag.You only need to add this snippet once, even if you plan to have a few different webforms.
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '912433', 'd5p1f7l9g0', 'load');
</script>
<!-- End MailerLite Universal -->
I've placed this code in my Layout wrapper. As previously stated, it works fine on first load, but as soon as the user navigates to a new page above error shows up.
PS I found an old question regarding this topic here, but it's old and not quite relevant to my situation. I need to figure out how to convert the above snippet for nextjs. Any help at all would be appreciated.
This approach treats the MailerLite universal tag as its own <script> hosted on your site's domain.
Add a NextJS custom document.
Create a JavaScript file containing the MailerLite universal tag code in ./public. I put mine in ./public/scripts/ml.js.
Add a <script> tag loading #2 in your custom _document.js file:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<script async src="/scripts/ml.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Everything worked as intended from there! (Caveat: I'm only using embedded forms).
I am trying to setup a Blog using Gatsby-JS. I have some posts in markdown that contain inline javascript.
As an example:
<script>window.alert("hello");</script>
I test the site using the command "Gatsby serve"
When I browse to my post via the index of the blog. The script is not executed. In the web console there are no errors.
When on the post page itself. If I do F5 or ctrl-f5 then the "hello" alert is displayed.
After uploading the site to github pages this behavior changes. I cannot get the script to execute by F5 or by navigating via the index. Only when I press ctrl+F5 the script is executed.
live test-blog can be found here (it show multiple alerts and tries to load plotly). https://dwjbosman.github.io/lstm-neural-network-for-sequence-learning/
Dinne's solution worked for me. Nice one! :)
I did need to avoid the use of JQuery though so I have posted here a version that doesn't rely on it:
componentDidMount() {
// Allow in-line JS scripts to be run
let scripts = document.querySelectorAll('[data-inline-script="data-inline-script"]');
scripts.forEach(function forEachScript(element) {
const script = element.innerHTML;
window.eval(script);
});
This will work with the following HTML:
<script data-inline-script="data-inline-script">
console.log("this works");
</script>
I am using this on a very basic static site. I'm not sure how much I like using eval() to be honest but it should cause no harm in my use-case.
Update
Although the above does work, I also need to include scripts using <script src="..."> which doesn't work :( This feels quite hacky too.
Checkout this question React: Script tag not working when inserted using dangerouslySetInnerHTML
Script in HTML that is inserted by React's dangerouslySetInnerHTML won't get executed. The linked question has a work around that perhaps you can use.
The previous answer pointed me in the right direction.
I gave all the inline scripts an attribute data-my-script. Next I added the following to layouts/index.jsx (not html.jsx as this is rendered only server side).
componentDidMount() {
let scripts = window.jQuery.find('[data-my-script]')
console.log(scripts);
scripts.forEach(function forEachScript(element) {
const script = window.jQuery(element).text();
window.eval(script);
});
}
render() {
const { children } = this.props;
return (
<Navigation config={config} LocalTitle={this.getLocalTitle()}>
<div ref={contentElement => (this.contentElement = contentElement)}>
<Helmet>
<meta name="description" content={config.siteDescription} />
// for plotly inside notebooks
// <script src="https://cdn.plot.ly/plotly-latest.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"/>
</Helmet>
{children()}
</div>
</Navigation>
);
}
}
I am trying to embed google plus posts in my application.
I have loaded platform.js file in header
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
function renderWidget() {
gapi.post.render("widget-div", {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'} );
}
</script>
In html page
Render the embedded post
<div id="widget-div"></div>
When I clicked on the link, it shows nothing. Is there anything to be added. Here is the reference i followed https://developers.google.com/+/web/embedded-post
You might be opening HTML file directly in browser, which could be problem in some browser(s) (i.e. In Google Chrome. You can verify the issue here).
Try running it using a local-server(XAMPP maybe) so the URL will look similar to http://localhost/yourpath/test.html
Hope this helps!!
I'm trying to include an external script in my react component in Meteor.
I've attempted just placing the script tag in my component like so :
TheLounge = React.createClass({
render() {
return (
<div>
<div className="main">
{/* Uberflip Embedded Hub (Use this to generate the frame below) */}
<script>var ufh_top_offset = 0, ufh_bottom_offset = 0;</script>
<script type="text/javascript" src="https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0"></script>
{/* /End Uberflip Embedded Hub */}
</div>
<Footer />
</div>
);
},
});
This makes it fine for the first time the page is loaded (via another page or a refresh). However, the script doesn't load up again when one navigates to another page and back.
So far I've attempted the following:
Injecting the script in componentDidMount and componentDidUpdate like the following:
In componentDidMount and componentDidUpdate:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
// Tested the line below with body, head, and a div with specific id.
document.getElementsByTagName("body")[0].appendChild(script);
I've also tried using these packages:
https://github.com/yariv/ReactScriptLoader
https://github.com/kadirahq/meteor-dochead
$.getScript()
However, with all four of the approaches above I get the error:
Error: 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.
I realize that's because the script I'm trying to load uses document.write();
I'm running out of things to try, I'd appreciate new ideas as to how to include this script into the React component.
tags in body or templates aren't executed by Meteor, they are parsed and then handled by Meteor's templating system. try jQuery getScript function:
componentWillMount() {
$.getScript('https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0');
}
I didn't try this out, but I read this for blaze. Maybe it can helps
https://maxlibin.com/meteor-include-external-javascript-files/