I've been trying to embed an external JavaScript source into my Next.js application and keep receiving following 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.
The code I am trying to use can be found here - The map with the vessel has an option to embed it. So far the component that generates this error looks like this:
<div className={styles['container']}>
<Script type="text/javascript">
var width="100%";var height="400"; var mmsi=228402900;
</Script>
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</Script>
</div>
If I copy the embed code into CodePen it works just fine - link to my codepen with the embedded map here.
Does somebody know what could be the problem here?
The issue occurs because the external script is being loaded asynchronously by next/script, thus ignoring the document.write() call present in the script.
From Document.write() MDN documentation:
Note: Using document.write() in deferred or asynchronous scripts will
be ignored and you'll get a message like "A call to document.write()
from an asynchronously-loaded external script was ignored" in the
error console.
You'll need to set the Script strategy to beforeInteractive so the script is added to <head>, and explicitly set the defer property to false to prevent the script from being loaded asynchronously.
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js"
strategy="beforeInteractive"
defer={false}
></Script>
Related
We have a script that our customers can put on their site in order to insert a form.
The script is included simply like this:
<script type="text/javascript" src="https://ourdomain.com/script.js"></script>
Since the script uses document.write, it cannot be loaded asynchronously.
One of our customers is complaining that their browser is giving the following error message: "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" and maintains that they have not altered the <script> tag in any way (so no async added).
Is it somehow possible that a <script> without an async attribute is still loaded asynchronously?
This occurs on a Magento 1.9 website with Chrome browsers.
I research on google before post on Stackoverflow,,
But all problem that i have found are different then my problem.
I am Developing Chrome Extension and load JS from JS...
I am placing an ad script into HTML head..
if i write a script manually in HTML head
<script src="Ads_URL"></script>
Its Working ads show..
.
But if i append script throung Jquery or Pure javascript
its return Warning
$("head").append("Google Analythic Script"); // Working
$("head").append("<script src="Ads_URL"></script>");//Return warning
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.
Any solution?
Update
This question is not duplicate.. Link in first comment is not helpful for me..
In that question #jfriend00 is using document.write("<span>");
If i use document.write() function, Ads show, but remove all tags from body and just <script> is left "document.write() Clear the body"
Here is my script that i want to inject
<script data-cfasync=false src='//s.ato.mx/p.js#id=21352&size=300x250'></script>
Did you tried this: chrome.tabs.executeScript? This didn`t add script in html but execute same as console. You can try to get contents of remote javascript code as a string and execute it.
I have written some javascript functions and saved the file as dashboardjs.jsp. The reason why the file is made as jsp is that i wanted to use struts2 tag inside the scripts. Now i call this script in a script tag as follows:
<script type="text/javascript" src="/dashboardjs.jsp"></script>
After loading this script i am just trying to call a function in the above script on load
<script type = "text/javascript">
$(function(){
getTrend(id,true,false); //this function is defined in dashboardjs.jsp
});
</script>
The above works completely fine in FF,Chrome but in IE it throws error saying getTrend is undefined. In IE developer tool (network tab) it shows that the call to the script dashboardjs.jsp is made multiple times. My question is why IE is behaving in this way? Is there any solution for this problem? Please suggest.
I have certain pages on my site that loads a good amount of JavaScript files. In the code below, edit_onload() is in script1.js. Typically all the scripts load fine and edit_onload fires successfully. On occasion it seems like script1.js isn't loading in time because edit_onload() errors with object expected. If you refresh the page everything will load fine.
My question is, shouldn't the <script> tag below wait for all of the .js files to load and then execute edit_onload()?
<script LANGUAGE="javascript" DEFER="true" for="window" event="onload">
<xsl:comment>
<![CDATA[
edit_onload();
]]>
</xsl:comment>
</script>
<script language="javascript" src="/_scripts/script1.js" defer="true"></script>
<script language="javascript" src="/_scripts/script2.js" defer="true"></script>
<script language="javascript" src="/_scripts/script3.js" defer="true"></script>
I think, an implementation of processing of deferred scripts is browser specific. For example, they can handle inline and external scripts in different queues. In general the 'defer' attribute is just a recommendation provided by a site developer for a user agent, but the user agent will not necessarily abide by the recommendation.
Also you should try using 'defer="defer"'. Can you move the call to the script1.js itself? Also you can periodically check an existence of a specific element moved to the end of the content being loaded and run the method only after the element is discovered.
BTW, you could possibly gain more control over script loading if you use a dynamic script loading metaphor (the link is just one of examples).
I am trying to extent a website page that displays google maps with the LabeledMarker. Google Maps API defines a class called GMarker which is extended by the LabeledMarker.
The problem is, I cant seem to load the LabeledMarker script properly, i.e. after the Google API loads and I get the 'GMarker not defined' error.
What is the correct way to specify the scripts in such cases?
I am using ASP.NET's ClientScript.RegisterClientScriptInclude() first for the google API url and then immediately after with the LabeledMarker script file.
The initial google API loader writes further script links that load the actual GMarker class. Shouldnt all those scripts be executed before the next script block(LabeledMarker script) is processed.
I have checked the generated HTML and the script blocks are emitted in the right order.
<script src="google api url" type="text/javascript"></script>
...
(the above scripts uses document.write() etc to append further script blocks/sources)
...
<script src="Scripts/LabeledMarker.js" type="text/javascript"></script>
Once again, the LabeledMarker.js seems to get executed before the google API finishes loading.
I think that is the problem. I was calling google.load() in the body.onload which happened after loading the scripts. Resolved by emitting script tag for the LabeledMarker from within the onload handler.