Unity Web Player does not work inside .xhtml

Unity Web Player does not work inside .xhtml - javascript

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.

Related

MathJax local extension loading time

I am using local version of both mhchem and arabic extensions for mathjax as I need to add some extra functions to arabic extensions and I am loading mathjax from https://cdn.mathjax.org/mathjax/latest/MathJax.js, my problem is when I load the extensions from local server it takes around 15sec to fully loaded and it gave an error File failed to load: http://127.0.0.1:8887/HTMLEditor/MathJax/mhchem/mhchem.js but both extensions working properly! and if I changed the MathJax.Ajax.config.path to get from https://cdn.mathjax.org/mathjax/contrib it loads fast in less than a second without any errors.
I tried to stop loading of arabic extension to see if my edits cause an issue but I got the same result
Sample of my HTML (Note: I expect that it will not work for you because I load some of scripts and extensions from local server and that exactly my issue)
<html>
<head>
<!-- <script src="arabic_mathjax.jsx"></script> -->
<script>
window.MathJax = {
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js", "[Contrib]/arabic/arabic.js", "[Contrib]/mhchem/mhchem.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
'HTML-CSS': {
undefinedFamily: 'Amiri'
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("Begin", function() {
MathJax.Ajax.config.path["Contrib"] = "http://127.0.0.1:8887/HTMLEditor/MathJax";
// your code to run once MathJax is ready, e.g., custom extensions etc.
MathJax.Hub.Queue( function(){
// something to queue after the initial typesetting is done
}
);
});
}
};
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
// remote script has loaded
};
script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
FixArabicCharacters($('.container'))
});
function FixArabicCharacters(node) {
if ($(node).children().length > 0) {
$(node).children().each(function () {
FixArabicCharacters(this);
});
}
else {
var str = $(node).text()
var regex = new RegExp("([\\u0621-\\u064A\\u0660-\\u0669])", "gm");
if (str.toLowerCase().indexOf('<math style="displayed">') >= 0) {
if (regex.test($(node).text())) {
$(node).html("$$\\alwaysar{" + $(node)
.text().replace('$', '').replace('<math style="displayed">', '').replace('</math>', '')
.replace(regex, "\\fliph{\\text{$1}}") + "}$$");
}
}
if (str.toLowerCase().indexOf('<math>') >= 0) {
if (regex.test($(node).text())) {
$(node).html("$\\alwaysar{" + $(node)
.text().replace('$', '').replace('<math>', '').replace('</math>', '')
.replace(regex, "\\fliph{\\text{$1}}") + "}$");
}
}
}
}
</script>
</head>
<body>
<p>input:</p>
<input type="text" id="myid" oninput="DynamicMJ.update()">
<p class="container" id="test"></p>
<!-- <p><input type="button" value="Update" onclick="" /></p> -->
<script>
var DynamicMJ = {
formula: document.getElementById("test"),
update: function () {
var a = document.getElementById("myid").value;
this.formula.innerHTML = "\\[" + a + "\\]";
MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.formula]);
}
};
DynamicMJ.update();
</script>
</body>
</html>
So please tell me, am I miss something?

How to make chessboard.js work on a local WordPress?

I've a page "Chess" with a custom template. When I use the cheessboard.js script online there is no problem. When I want use a downloaded version of it and replace <base href="http://chessboardjs.com/" /> with the local path, it produces this errors on the browser:
GET http://localhost/css/chessboard.css (index):4
GET http://localhost/js/chess.js (index):8
GET http://localhost/js/jquery-1.10.1.min.js (index):9
GET http://localhost/js/chessboard.js (index):10
Uncaught ReferenceError: $ is not defined
How to adjust the template Chess.php?
...
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
...

The <base> attribute specifies the base URL to use for all relative URLs contained within a document. And you're probably placing the files inside your theme directory, and we get that with get_stylesheet_directory_uri().
The correct is to use wp_enqueue_scripts to load JS and CSS files, and to do it only on the pages where they are needed. Also, don't enqueue external jQuery from external sources, use the one bundled with WP: wp_enqueue_script('jquery');.
You could also create a shortcode for this. The following is just a raw example with Chessboardjs files inside the directory /wp-content/themes/your-theme/chessboardjs/. And the template page-chess.php is this:
<?php
/**
* Template Name: Chess
*/
$base = get_stylesheet_directory_uri() . '/chessboardjs';
?><html>
<head>
<link rel="stylesheet" href="<?php echo $base; ?>/css/chessboard-0.3.0.min.css" />
<script src="<?php echo $base; ?>/js/chess.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo $base; ?>/js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
var cfg = {
pieceTheme: '<?php echo $base; ?>/img/chesspieces/wikipedia/{piece}.png',
position: 'start'
};
board = new ChessBoard('board', cfg);
window.setTimeout(makeRandomMove, 500);
};
jQuery(document).ready(init);
</script>
</body>
</html>

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

Javascript does not work fine in google chrome

I created an HTML documentation with the help of HelpNDoc personal edition http://www.helpndoc.com/
I have used a default template provided with it the template loads well in almost all the browsers except for the google chrome , the template does not load , since i am not so advanced in HTML i thought you could give some help.
Errors:
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/lenovo
/Documents /HelpNDoc/Output/html/testingproject.html from frame with URL
file:///C:/Users/lenovo/Documents/HelpNDoc/Output/html/toc.html. Domains,
protocols and ports must match.
toc.html:36
Uncaught TypeError: Cannot call method 'lastIndexOf' of undefined toc.html:36
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/lenovo
/Documents/HelpNDoc/Output/html/toc.html from frame with URL file:///C:/Users
/lenovo/Documents/HelpNDoc/Output/html/Introduction.html. Domains, protocols and
ports must match.
Introduction.html:27
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/lenovo
/Documents/HelpNDoc/Output/html/toc.html from frame with URL file:///C:/Users
/lenovo/Documents/HelpNDoc/Output/html/Systemrequirements.html. Domains,
protocols and ports must match.
Systemrequirements.html:27
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/lenovo
/Documents/HelpNDoc/Output/html/toc.html from frame with URL file:///C:/Users/lenovo
/Documents/HelpNDoc/Output/html/Gettinghelp.html. Domains, protocols and ports
must match.
Gettinghelp.html:27
toc.html looks like-i am adding contents before line 36 and after it
<script type="text/javascript" src="js/searchdata.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.dynatree.min.js"></script>
<script type="text/javascript" src="js/hndjsse.js"></script>
<script type="text/javascript">
var bSearchDataLoaded = true;
var sHelpIdToActivate = '';
$(document).ready(function()
{
var sAnchorName =
top.location.href.substring(top.location.href.lastIndexOf("#") + 1,
top.location.href.length);
var nSelectedTab = 0;
if (sAnchorName == '_index') nSelectedTab = 1
else if (sAnchorName == '_search') nSelectedTab =
2;
$("#tabs").tabs({
selected: nSelectedTab,
select: function(event, ui) { HideKwPopup(); }
});
// Toc
$("#tab-toc").dynatree({
clickFolderMode: 1,
debugLevel: 0,
imagePath: 'css/dynatree/chm/',
onActivate: function(node){
if ($("#tab-keywords") && $("#tab-
keywords").dynatree && $("#tab-keywords").dynatree("getTree") && $("#tab-
keywords").dynatree("getTree").activateKey)
$("#tab-
keywords").dynatree("getTree").activateKey(null);
if(node.data.href && node.data.href != '#'){
window.open(node.data.href,
node.data.target);
}
}
});
introduction.html looks like-i have added lines before and after line 27
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hnd.js"></script>
<script type="text/javascript"><!--
if (top.frames.length == 0)
{
var sTopicUrl =
top.location.href.substring(top.location.href.lastIndexOf("/") + 1,
top.location.href.length);
top.location.href = "testingproject.html?" + sTopicUrl;
}
else if (top && top.FrameTOC && top.FrameTOC.SelectTocItem)
{
top.FrameTOC.SelectTocItem("Introduction");
}
</script>
</head>
system requirements.html looks like
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hnd.js"></script>
<script type="text/javascript"><!--
if (top.frames.length == 0)
{
var sTopicUrl =
top.location.href.substring(top.location.href.lastIndexOf("/") + 1,
top.location.href.length);
top.location.href = "testingproject.html?" + sTopicUrl;
}
else if (top && top.FrameTOC && top.FrameTOC.SelectTocItem)
{
top.FrameTOC.SelectTocItem("Systemrequirements");
}
</script>
</head>
gettinghelp.html looks like -
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hnd.js"></script>
<script type="text/javascript"><!--
if (top.frames.length == 0)
{
var sTopicUrl =
top.location.href.substring(top.location.href.lastIndexOf("/") + 1,
top.location.href.length);
top.location.href = "testingproject.html?" + sTopicUrl;
}
else if (top && top.FrameTOC && top.FrameTOC.SelectTocItem)
{
top.FrameTOC.SelectTocItem("Gettinghelp");
}
</script>
</head>
Any help is highly appreciated.
Thanks
Eddie

This is just toc.html, but I'm intressted if this solves the problem for that file:
<script type="text/javascript" src="js/searchdata.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.dynatree.min.js"></script>
<script type="text/javascript" src="js/hndjsse.js"></script>
<script type="text/javascript">
var bSearchDataLoaded = true;
var sHelpIdToActivate = '';
$(document).ready(function()
{
var sAnchorName =
top.location.href.substring(top.location.href.lastIndexOf("#") + 1,
top.location.href.length);
var nSelectedTab = 0;
if (sAnchorName == '_index'){
nSelectedTab = 1
}
else if (sAnchorName == '_search'){
nSelectedTab = 2;
$("#tabs").tabs({
selected: nSelectedTab,
select: function(event, ui) { HideKwPopup(); }
});
}
// Toc
$("#tab-toc").dynatree({
clickFolderMode: 1,
debugLevel: 0,
imagePath: 'css/dynatree/chm/',
onActivate: function(node){
if ($("#tab-keywords") && $("#tab-keywords").dynatree && $("#tab-keywords").dynatree("getTree") && $("#tab-keywords").dynatree("getTree").activateKey){
$("#tab-keywords").dynatree("getTree").activateKey(null);
if(node.data.href && node.data.href != '#'){
window.open(node.data.href, node.data.target);
}
}
}
});
});
If this works, it was just a case of missing out a bracket somewhere ... If not it is probably a deeper problem which I can't help with :)
Hope this helps

This problem is due to security restrictions of Google Chrome when some JavaScript is launched locally. This won't happen when the documentation is uploaded on a web-server. This is explained here: http://www.helpndoc.com/sites/default/files/documentation/html/index.html?GoogleChromeshowsanerrorwhensear.html
Also #powtac is right, this is a duplicate for: Unsafe JavaScript attempt to access frame with URL

Javascript method not defined

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>

Develop Reference

JavaScript is the programming language of the Web.

Unity Web Player does not work inside .xhtml - javascript

Related

MathJax local extension loading time

How to make chessboard.js work on a local WordPress?

use tags <script> with if and else

Javascript does not work fine in google chrome

Javascript method not defined

Categories

Resources