Javascript method not defined - javascript

Why does this not work when I move the code in the first script block (without the script tag itself) to an external javascript file.
The idea is to call homead.load() from home page and load everything processed by homead_build();
Error says 'homead not defined' using Firefox Error console
<div id="box">
</div>
<script type="text/javascript">
var homead = {
box_id: "box",
width: "150px",
load: function(){
homead.homead_build();
},
homead_build: function(){
var div = document.createElement('div');
div.style.width = homead.width;
div.style.height = '55px';
div.style.border = 'solid 2px #000';
var box = document.getElementById(homead.box_id);
box.appendChild(div);
}
};
</script>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>


Maybe you are including the external script file after you call homead.load()? Make sure it is loaded before it is used:
<script language="JavaScript" type="text/javascript" src="external.js"></script>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>


Make sure you include it before using homead, and that the file has been loaded correctly.
(e.g.: say alert("im loaded...") in the file)
Your code can be simplified btw:
var homead = {
box_id: "box",
width: "150px",
load: function(){
var div = document.createElement('div');
div.style.width = homead.width;
div.style.height = '55px';
div.style.border = 'solid 2px #000';
var box = document.getElementById(homead.box_id);
box.appendChild(div);
}
};


yes its working fine.You might be giving wrong src path of file to script tag.
I have done following ;
<script language="JavaScript" type="text/javascript" src="../../Scripts/test.js" ></script>
added code
<div id="box">
</div>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>

Related

JavaScript - Remove script tags from HTML

When a HTML file is loaded, I want to run a script which would remove few scripts tags from the HTML file based on the user agent.
To do this I've followed this question: Removing all script tags from html with JS Regular Expression
But couldn't achieve what I needed, the script tags are removed and they are getting downloaded.
HTML:
<html>
<head>
</head>
<body>
<p></p>
<script type="text/javascript">
function stripScripts(s) {
var div = document.createElement('div');
div.innerHTML = s;
var scripts = div.getElementsByTagName('script');
var i = scripts.length;
while (i--) {
scripts[i].parentNode.removeChild(scripts[i]);
}
return div.innerHTML;
}
var userAgent = navigator.userAgent;
console.log(userAgent);
if (!userAgent.includes("Chrome")) {
stripScripts(); // Here how can I call the present index.html?
}
else {
var para = document.createElement("P");
var t = document.createTextNode("You cannot view this in Chrome");
para.appendChild(t);
document.body.appendChild(para);
};
</script>
<script type="text/javascript" src="scripts2.js"></script> <!-- load only when the condition is met else remove it --!>
</body>
</html>
When I run the index.html in chrome, script2.js is loading all the time.

SharePoint jquery javascript does not run but works from console

I have the following code which works from console but does not work on page load.
The page does not have any error.
<div class="nav-report-category">
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ms-listviewtable tr[class='ms-gb']").each(function(){
alert('test 3');
});
var $mydiv = document.getElementsByClassName("nav-report-category")[0];
var $liTag = document.createElement('li');
var $aTag = document.createElement('a');
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-report-category">
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ms-listviewtable tr[class='ms-gb']").each(function(){
alert('test 3');
});
var $mydiv = document.getElementsByClassName("nav-report-category")[0];
var $liTag = document.createElement('li');
$mydiv.append($liTag);
var $aTag = document.createElement('a');
$mydiv.append($aTag);
});
</script>
Not sure what you are trying to do but if you wanted it in the DOM you have to also append it.If this is the thing that "was not working".

Unity Web Player does not work inside .xhtml

when i try to use javascript to start the unity webplayer inside a xhtml-file the webpage cant detect the webplayer and asks me to download it.
Same source(generated by unity itself) with .html works fine
why? :O
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: 512,
height: 260,
params: { enableDebugging:"0" }
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "BulletImages.unity3d");
});
-->
</script>
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>

JavaScript isn't allowed to use document.write() on XHTML pages.
Note the offending snippet:
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
You may notice the script in question is performing a very simple operation. If you know your deployment, you can strip it and include the result plainly:
If deploying to HTTP website:
<script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
If deploying to HTTPS website:
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
If you're not sure, an ideal fix would be to edit the page's DOM, but a quick and dirty workaround is to edit a node's innerHTML directly.

document.getElementById returns null when working with iFrame

My html page has the following 2 scripts:
1.
<script language="javascript" type="text/javascript">
document.write("<iframe id=\"frame\" src=\"http://mywebsite.com/" + "\"scrolling=\"yes\" width=\"850\" height=\"575\" frameborder=0></iframe>");
</script>
2.
<script type="text/javascript">
var myframe = document.getElementById("frame");
if (myframe) {
var myframe_window = document.getElementById('frame').contentWindow;
if (myframe_window) {
myframe_window.confirm = window.confirm;
}
}
</script>
I'm trying to override a methiod in iFrame, but cannot get its id.
What am I doing wrong?

use tags <script> with if and else

I have some script tag like this:
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/prefixfree.min.js"></script>
This is my app i wrote using phonegap for android but i want to use code in web. And i dont use all for web page.
Have any way to do it like using if else like this in html:
if(anything) {
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/prefixfree.min.js"></script>
} else {
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
}
I am a dumper, please help me.
Thanks for reading!!!
Edit:
if i want to change my script tag:
<script src="js/prefixfree.min.js"></script>
Become like this:
<script src="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/js/prefixfree.min.js"></script>
Have anyway to make a variable like:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
And then use in tag like this:
<script src = "key + 'js/prefixfree.min.js'"></script>

How about this,
function registerScript(scriptPath) {
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = scriptPath;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scriptTag, s);
}
if (anything) {
registerScript("cordova-2.5.0.js");
}

For the first part. you can do this:
if (anything) {
$('head').append('<script src="cordova-2.5.0.js"></script>')
.append('<script src="js/jquery-1.7.2.min.js"></script>')
.append('<script src="js/jquery.mobile-1.1.1.min.js"></script>')
.append('<script src="js/jquery.xdomainajax.js"></script>')
.append('<script src="js/xml2json.js"></script>')
.append('<script src="js/prefixfree.min.js"></script>')
} else {
$('head').append('<script src="js/ZipPlugin.js"></script>')
.append('<script src="js/jquery-ui.min.js"></script>')
.append('<script src="js/jquery.ui.touch-punch.min.js"></script>')
}
To change the script tag, do this:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
$('script[src="js/prefixfree.min.js"]').attr('src', key + 'js/prefixfree.min.js');

Using jquery template :
DEMO : http://jsfiddle.net/abdennour/R36Qc/3/
Your template :
<script id="myscripts" type="text/x-jquery-tmpl">
<script src="${myurl}" type="text/javascript">
{{html "</sc"+"ript>"}}
</script>
Your javascript code :
$('#myscripts').tmpl(myarray).prependTo('head')
The branching (if) is done on array of String (src of js) :
var myarray=[]
if (anything) {
myarray=[{myurl:"cordova-2.5.0.js"},
{myurl:"js/jquery-1.7.2.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"},
{myurl:"js/jquery.xdomainajax.js"},
{myurl:"js/xml2json.js"},
{myurl:"js/prefixfree.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"}
]
} else {
myarray=[{myurl:"js/ZipPlugin.js"},
{myurl:"js/jquery-ui.min.js"},
{myurl:"js/jquery.ui.touch-punch.min.js"} ]
}
See : https://stackoverflow.com/a/5462679/747579
To check result , open browser inspector :

You could make a script to create all the scripts node like:
<script>
var head= document.getElementsByTagName('head')[0];
var key = '';
if(anything) key = 'http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/';
var scripts = new Array()
scripts[0] = 'js/prefixfree.min.js';
scripts[1] = 'js/foo.js';
for(var s in scripts) {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= key + s;
head.appendChild(script);
}
</script>

You could use pure javascript like that:
<script>
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/",
file=document.createElement('script');
file.type = "text/javascript";
file.src = key + 'js/prefixfree.min.js';
document.getElementsByTagName("head")[0].appendChild(file);
</script>

<script>
if(foo) {
document.write('<script src="a.js"><\/script>');
} else {
document.write('<script src="b.js"><\/script>');
}
</script>
In this case document.write is a valid option. The script tags are blocking anyway.

You can include script files dynamically using JavaScript. See an example here:
Load jQuery with Javascript and use jQuery

Categories

Resources