how to embed the whole html file into JS - javascript

I am trying to implement an online chat functionality on 3 of my websites, but I dont want to copy paste my whole code on every website. I want to create something like tawk.to has. They just have a <script> tag and we paste a tiny code on our page and the whole functionality is rendered through JS.
Right now I have it in an HTML file, where my logic is in JS in the same HTML file.
Something like this?
<script src="path-to-my-file.js"></script>
Basically in my page's tag I will include this JS.
<!DOCTYPE HTML>
<body>
<script src="loads-html-from-other-place"></script>
</body>
Here is what tawk.to does:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var
s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/12341/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
You just paste this code in your page and it displays chat box along with the functionality

Yes you can do this by below approach.
....
</body>
<script src="path-to-my-file.js"></script>
Create a JS file
IN that file write a logic to create chat button.
That file can have click events of that button which is added at run time VIA ajax.
You can then include this file in all the HTML pages where you need chat functionality.
Make sure you load this file at the end of body tag.

Related

How do I use <model viewer> to upload and display a model onto my site?

I am currently working on a portfolio site through Cargo. I have minor understanding of writing script but have been attempting to load a 3D model onto my homepage. I found the tag and was wondering how to make it work, it is not visible on the screen right now.
<!DOCTYPE html>
<html>
<body>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://files.cargocollective.com/c1743864/exp_flower_oldv.obj" shadow-intensity="1" camera-controls touch-action="pan-y" generate-schema></model-viewer>
</body></html>
The code above I have attempted it and Cargo accepts it but the model is not visible. For
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
Do I copy and paste the code from this link and save it as an html file to then upload it onto cargo?

External javascript file in html not working

first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.
remove script tags from helloWorld.js
just
alert("hello");

External link Alternative for JS

hi am trying to create an external link for a java script program i created and i tried using https://www.000webhost.com but they blocked me, so pleases is there any better way i can do this, plus am still a learner in programming,
here is the code i created and i want it to be linked,
document.body.appendChild(document.createElement('script')).src='https://usscript1.000webhostapp.com/example1';
EDIT:
For hosting the JS source file on some external server for testing you can use sites like http://yourjavascript.com
You can search for more alternatives on Google but this one worked well for me :)
Original Answer:
As others pointed out in comments, you can simply put the source url of JavaScript program in src attribute of <script> tag...
<html>
<head>
<script src="https://usscript1.000webhostapp.com/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
Regarding the blocking issue, make sure your src link to the JavaScript file is correct (by opening the link in seperate browser tab or have look at the console in inspect page window for any errors).
You can put the script on the same site and link to it as,
<html>
<head>
<script src="/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
If you are facing issues with putting the file on your site, you can directly put the code of JavaScript program inside <script> tag like this...
<html>
<head>
<script>
...your JS program goes here...
</script>
</head>
<body>...your website's body here...</body>
</html>

Why iOS Safari loads JS file after </html> tag after 30 seconds of HTML loading

To share an interesting observation of <script> tag after </html>.
We have a HTML page which is written in below way:
<html>
<body>...</body>
</html>
<script type="text/javascript" src="js/util.js"> </script>
<script type="text/javascript">
....
</script>
The page is embedded into an iOS app, and we found randomly the page is loaded more than 30seconds.
After diagnostics using Safari Web Inspection feature to record timeline, we found the way of writing the <script> tag after </html> causing mobile Safari or iOS UIWebView to start loading util.js after 30seconds of finishing loading the containing HTML page.
Is there a specific reason of this 30 seconds waiting before loading the util.js?
You shouldn't have any tags outside of the tags, it is pure malformed html syntax.

How can i get the code of script file?

We are developing a web based application. In this we want to hide a script files from browser's page source. After some research we are planned to push the script files dynamically on browser page load, and also after page loaded we empty the source of the script files.
By using this method we are hide the script files from browser's page source.Is there any other method to get the script files.
Instead of inline javascript you can use external files. Your code will not be in the page you are viewing, but in another file. Of course it's not hidden from the browser.
Example for inline javascript:
<!-- index.html -->
<body>
<script type="text/javascript">
alert("my super secret js!");
</script>
</body>
Example for external file javascript:
<!-- index.html -->
<head>
<script type="text/javascript" src="your_js_file.js"></script>
</head>
/* your_js_file.js */
alert("my super secret js!");
Simple! If you see source like : <script type="text/javascript" src="xyz.js"></script> in the browser's sorce window , then click on it and it will show you your javascript code!

Categories