I'm deploying a Google web app to write commutative diagrams with LaTeX/Xy-pic.
In the heading of html page I put the following configuration:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
"HTML-CSS": {
styles: {".MathJax_Preview": {visibility: "hidden"}}
},
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions:
["AMSmath.js","AMSsymbols.js","http://sonoisa.github.io/xyjax_ext/xypic.js"]}
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js">
</script>
The problem is that the file http://sonoisa.github.io/xyjax_ext/xypic.js is not loaded because it is from an http source. This is the message I read in console:
MathJax.js:19 Mixed Content: The page at 'https://script.google.com/' was loaded over HTTPS, but requested an insecure script 'http://sonoisa.github.io/xyjax_ext/xypic.js?V=2.7.5'. This request has been blocked; the content must be served over HTTPS.
I try to use https://sonoisa.github.io/xyjax_ext/xypic.js instead, but this doesn't work at all.
Any suggestions?
One way to prevent the error message described on the question is to copy the code from the referred JavaScript library to the Google Apps Script project.
The above could be done in several ways that will depend on how you prefer to manage your code, but according to the best practices on https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascriptHTML, CSS and JavaScript should be kept on separate files. This implies to use a template like the following:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>
Where JavaScript is the file name of the file holding the JavaScript code. The name actually could be almost anything that makes sense to you and even you would have your JavaScript code on several files, like having one for you own code and another for the referred JavaScript library.
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
Can we use async attribute to load script asynchronously for script loaded dynamically?
By script loaded dynamically, if you mean adding javascript code dynamically to your page, then the answer is No.
async attribute can only be used on loading external scripts that are referred to via a URL specified in src attribute.
The async attribute is only for external scripts (and should only be used if the src attribute is present)
Example, You can load only scripts like this asyncronously
<script src="external-file.js" async></script>
It is an interesting point.
Here is an example, some Similar StackOverflow questions, and jQuery Document link For use of Async attribute
Example:
<!DOCTYPE html>
<html>
<head>
<title>Async Test Attribute</title>
</head>
<body>
<script src="async_demo.js" async></script>
<h2>Welcome to Demo!</h2>
<script>
console.log('HELLO NON-async');
</script>
</body>
</html>
async_demo.js
console.log('HELLO Async');
Screencast for above code: https://hareen-nipl.tinytake.com/sf/MzEwNzYzOV85MzEzNTgz
Async jQuery : http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async
W3School Document: https://www.w3schools.com/tags/att_script_async.asp
Similar StackOverflow questions
Add defer or async attribute to dynamically generated script tags via javascript
Is the "async" attribute/property useful if a script is dynamically added to the DOM?
Please comment down below if you have any questions for the same.
Is there a simple way (or what could be the simplest way) to include a html-code fragment, which is stored in a text file, into a page code?
E.g. the text file fragment.txt contains this:
<b><i>External text</i></b>
And the page code should include this fragment "on the fly". (Without php ...?)
The Javascript approach seems to be the preferred one. But with the examples below you possibly can get problems with cross origin requests (localhost to internet and vice versa) or you can have security problems when including external scripts which are not served via HTTPS.
An inline solution without any external libraries would be:
<!DOCTYPE html>
<html>
<body>
<div id="textcontent"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('textcontent').innerText = xhttp.responseText;
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
</script>
</body>
</html>
Here you need a file content.txt in the same folder as the HTML file. The text file is loaded via AJAX and then put into the div with the id textcontent. Error handlings are not included in the example above. Details about XMLHttpRequest you can find at http://www.w3schools.com/xml/xml_http.asp.
EDIT:
As VKK mentioned in another answer, you need to put the files on a server to test it, otherwise you get Cross-Origin-Errors like XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
You need to use Javascript to do this (or perhaps an iframe which I would avoid). I'd recommend using the JQuery framework. It provides a very simply DOM method (load) that allows you to load the contents of another file into an HTML element. This is really intended for AJAX calls, but it would work in your use case as well. The fragment.txt would need to be in the same server directory as the html page (if it's in a different directory just add on a path).
The load method is wrapped in the $(document).ready event handler since you can only access/edit the contents element after the DOM (a representation of the page) has been loaded.
Most browsers don't support local AJAX calls (the load method uses AJAX) - typically the HTML and txt files would be uploaded to a server and then the html file would be accesed on the client. Firefox does support local AJAX though, so if you want to test it locally use Firefox.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function() {
$("#contents").load("fragment.txt");
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
With javascript. I use it.
Example:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
If I have some Mootools script, do I include the script in HTML like so?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
window.addEvent("domready", function(){
$$('div.rj_insertcode a.glossarylink, .no_glossary a.glossarylink').each(function(el) {
new Element("span", {
html: el.get("html")
}).replaces(el);
});
});
</script>
</head>
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
if mootools is already included then your domready script block needs to be after the call to include mootools so its symbols and methods are defined.
typically:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
// code here
});
</script>
if your script is unlikely to produce anything that relates to template variables you are outputting and you just work the DOM, then I'd suggest moving it to an external .js file instead.
Other best practices ATM seem to point to putting all js at the bottom so it's non-blocking and faster but this negates the point of domready as by the time you run the js all page elements are defined, it won't fire any earlier (you can reference dom already).
<script type="text/javascript" src="your-mootools-file.js"></script>