How to avoid document.write on a media query - javascript

I try to avoid using document.write on a media query. Any suggestions?
<script>
if (screen && screen.width > 601) {
document.write('<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""><\/script>');
}
</script>

You can manually create a script element and then append it.
const scripts = document.getElementsByTagName('SCRIPT');
console.log(scripts);
<script>
if (screen && screen.width > 601) {
const script = document.createElement('script');
script.src = "https://unpkg.com/leaflet#1.6.0/dist/leaflet.js";
script.integrity = "sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==";
script.crossOrigin = "";
document.getElementsByTagName('BODY')[0].appendChild(script);
}
</script>
Please let me know if it works for you.

Related

Load different JS file for mobile and desktop

So I have two different JS files to load: one for desktop and a different one for mobile. And I have used this code:
<script>
if ( $(window).width() < 739) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>
But the only script that loads is the desktop one.
So I found the answer:
<script>
if (screen && screen.width > 900) {
document.write('<script type="text/javascript"
src="https://example.com/desktop.js"><\/script>');
}
</script>
<script>
if (screen && screen.width < 900) {
document.write('<script type="text/javascript"
src="https://example.com/mobile.js"><\/script>');
}
</script>
Verified and working!
var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
if (screen.width() < 739)
{
js.src = "js/mobile.js";
}
else
{
js.src = "js/desktop.js";
}
head.appendChild(js);
I think checking screen size to decide if its mobile or desktop browser is a little risky as it may confuse sometime with iPad or small screen desktop.
So, We can navigator to check if its mobile or desktop and den our job accordingly.
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
your e.g:
<script>
if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>

how to script show in below 1000px

I have a script but used in same page. like two times. i got error while working when i working on desktop it's work but when i check on below 1000px then it's get error like:- Duplicate Embedded Players Detected.
I think it's worked when i open desktop then show desktop script and when i open mobile then desktop not show mobile script show. please help me how to do that. :-
this is the script i used:-
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
I used for this but it's show syntax error:-
<script>
if (jQuery(window).width() < 1000) {
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
}
</script>
Please tell me how to fix that issue. Thanks alot
if (jQuery(window).width() < 1000) {
<script type="text/javascript" ...snip...></script>
}
This code is Javascript, so you need to construct a script element in Javascript and append it to the document manually.
var headElem = document.getElementsByTagName('head')[0];
var scriptElem = document.createElement("script");
scriptElem.type = "text/javascript";
if (jQuery(window).width() < 1000) {
scriptElem.src = "play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox";
scriptElem.class = "mobile";
}
else {
scriptElem.src = "desktop.vidyard.com/.......js";
scriptElem.class = "desktop";
}
headElem.appendChild(scriptElem);

Loading scripts with document.write in an extension's content script

If a script contains:
document.write("<iframe>ads here</iframe>");
If it's included in the html before the page is requested for load, it might look something like this:
<html>
<!-- stuff !-->
<div><script src="document_write.js" type="text/javascript"></script></div>
<body>
</html>
Loading an html page with the code similar to above will result in the <iframe> being placed in the <div> tag which housed the script. If the document.write() is called after the page load, it will overwrite the whole page.
Chrome extensions' content scripts will also overwrite a page with document.write, or crash it - depending on when in the lifecycle of a page it was called.
Is there a way to insert scripts containing document.write() in Chrome's content scripts?
I had faced the same problem when I was working with some conversion tracking scripts on my ajax site. I ended up overriding document.write, which fixed the problem.
$(document).ready(function() {
document.write = function(str) {
var moz = !window.opera && !/Apple/.test(navigator.vendor);
if (str.match(/^<\//))
return;
if (!window.opera)
str = str.replace(/&(?![#a-z0-9]+;)/g, "&");
str = str.replace(/<([a-z]+)(.*[^\/])>$/, "<$1$2></$1>");
if (!moz)
str = str.replace(/(<[a-z]+)/g, "$1 xmlns='http://www.w3.org/1999/xhtml'");
var div = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
div.innerHTML = str;
var pos;
if (!moz) {
pos = document.getElementsByTagName("*");
pos = pos[pos.length - 1];
} else {
pos = document;
while (pos.lastChild && pos.lastChild.nodeType == 1)
pos = pos.lastChild;
}
var nodes = div.childNodes;
while (nodes.length)
pos.parentNode.appendChild(nodes[0]);
};
});

Loading Inline Javascript through an AJAX load through jQuery

I have a similar problem to this question.
Loading Javascript through an AJAX load through jQuery?
I want to load an HTML page into a div container using Ajax and JQuery's .load() . The html page has javascript on it that loads a weather widget from http://www.showmyweather.com/
This is the script:
<script type="text/javascript" src="http://www.showmyweather.com/weather_widget.php? int=0&type=js&country=ca&state=Ontario&city=Hamilton&smallicon=1&current=1&forecast=1&background_color=ffffff&color=000000&width=175&padding=10&border_width=1&border_color=000000&font_size=11&font_family=Verdana&showicons=1&measure=C&d=2013-11-11"></script>
I don't know how to include the widget in the DOM other than placing the script inline the html page. If there is a way to use this script and add it in using $.getscript(); that would be nice, but I can't figure it out.
var element = document.createElement("iframe");
document.body.appendChild(element);
var frame = window.frames[windows.frames.length - 1];
frame.document.write('<scr' + 'ipt type="text/javascript" src="http://www.showmyweather.com/weather_widget.php?int=0&type=js&country=ca&state=Ontario&city=Hamilton&smallicon=1&current=1&forecast=1&background_color=ffffff&color=000000&width=175&padding=10&border_width=1&border_color=000000&font_size=11&font_family=Verdana&showicons=1&measure=C&d=2013-11-11"></sc'+ 'ript>');
This is the way it's done with mootools in Asset.javascript:
var loadScript = function (source, properties) {
properties || (properties = {});
var script = document.createElement('script');
script.async = true;
script.src = source;
script.type = 'text/javascript';
var doc = properties.document || document, load = properties.onload || properties.onLoad;
return delete properties.onload, delete properties.onLoad, delete properties.document,
load && (script.addEventListener ? script.addEventListener("load", load) : script.attachEvent("readystatechange", function() {
[ "loaded", "complete" ].indexOf(this.readyState) >= 0 && load.call(this);
}))
doc.getElementsByClassName("head")[0].appendChild(script);
}
Now you can call loadScript("script url", {document: window.frames[0].document}) and it will load the script in the window. Just need to pass it an external document in options and a script.

Load a javascript file and css file depending on user agent

Just like in the title.
I got two files: one is javascript file and one is css file. And if user-agent is an iPad I want to load those files - but only when user-agent is iPad. So below two lines are only loaded when user-agent is an iPad. how can i achieve that
<link rel="stylesheet" href="/c/dropkick.css" type="text/css"/>
<script src="/s/jquery.dropkick-1.0.0.js" type="text/javascript"></script>
if (navigator.userAgent.match(/iPad/i) != null){ // may need changing?
var js = document.createElement('script');
js.type = "text/javascript";
js.src = "/s/jquery.dropkick-1.0.0.js";
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "/c/dropkick.css";
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);
h.appendChild(css);
}
Or whatever would be in the User-Agent header for an iPad.
References:
window.navigator.userAgent
document.createElement
node.appendChild
You can use document.createElement to create link and script elements, and then append them to the document (for instance, append them to document.getElementsByTagName('head')[0] or similar).
This answer here on SO suggests that you can dtect an iPad by just looking for the string "ipad" in the navigator.userAgent field. Of course, the user agent field can be spoofed.
So for example:
<script>
(function() {
var elm, head;
if (navigator.userAgent.indexOf("ipad") !== -1) {
head = document.getElementsByTagName('head')[0] || document.body || document.documentElement;
elm = document.createElement('link');
elm.rel = "stylesheet";
elm.href = "/c/dropkick.css";
head.appendChild(elm);
elm = document.createElement('script');
elm.src = "/s/jquery.dropkick-1.0.0.js";
head.appendChild(elm);
}
})();
</script>
...but that's off-the-cuff, untested.
(Note that there's no reason to put the type on either link or script; in the case of link, the type comes from the content-type of the response. In the case of script, the default is JavaScript.)

Categories