I have html file which has 3 script tags. I want to put these script tags in my vue.js file
my html file
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
So i want to add the 3 script tags seen in the above html to my vue js file.So for this i have
tried to create the script tags manually in the mounted function of the vue file as seen below-
my vue js file
<template>
<div id="geApp">
</div>
</template>
<script>
const client = '../editors/pure/js/mxClient.js'
const mains = '../editors/dist/main.js'
mounted () {
var a = document.body.getElementsById("geApp")
let basePath = document.createElement('script')
basePath.innerText = 'mxBasePath = "../editors/pure"'
basePath.async = true
a.appendChild(basePath)
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', './pure/js/mxClient.js')
recaptchaScript.async = true
a.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src','./dist/main.js')
processes.async = true
a.appendChild(processes)
},
.....
.....
</script>
Unfortunately iam getting an error saying http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found) from main.js file.So how do i load these scripts correctly in my vue js file?
If files that you are trying to add are some libraries/plugins that doesn't support import or require for some reason only then you try to do the way you are adding the file to DOM:
Anyhow, If you are sure and don't care about webpack processing your .js files in anyways, then keep your files in ./public/assets/js/ folder, then just do:
<script src="./assets/js/your-file.js"></script>
Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.
Related
With Vite, using absolute paths in index.html results in them being transformed based on the base config, which is nice.
For instance my index.html contains this:
<script type="text/javascript" src="/config.js"></script>
And base is set to "/demo". The exported index.html will contain:
<script type="text/javascript" src="/demo/config.js"></script>
This is fine for most of my file but I would need to have a script loaded from the root of the server for a very specific thing. Is it possible to indicate to Vite to not change the path of a specific script tag? Like a preprocessor command? Like this:
<!-- #vite-ignore -->
<script type="text/javascript" src="/config.js"></script>
That would be nice!
I used an ugly fix:
<script type="text/javascript">
// We have to do it using javascript otherwise Vite modifies the path
var config = document.createElement('script')
config.type = 'text/javascript'
config.src = '/config.js'
document.head.appendChild(config)
</script>
In a React project, my public.html file looks like this:
<head>
<link rel="stylesheet" href="some_stylesheet_file.css">
</head>
<body>
<div id="root"></div>
<script src="function.js"></script>
</body>
All the components of the project load inside the "root" div.
The "function.js" file is an external javascript file from a theme.
In one of the React components, I have an input field:
<input type="text" name="userName" id="userName" />
Now, inside "componentDidMount()" of that component, if I write
console.log(document.getElementByID("userName"))
it shows the "userName" field correctly in the console. But if I do the same thing in the "function.js" file, the output is null, which indicates the external javascript file is not working properly. I am not sure how to make the external javascript file work so that I can use the properties of the theme. Can anyone help?
We use the DOM method to load external JS in our ReactJS app.
For example, https://api.mesibo.com/mesibo.js is an external JS library provided by mesibo, we load it as following
const externalJS = "https://api.mesibo.com/mesibo.js";
const script = document.createElement("script");
script.src = externalJS;
document.body.appendChild(script);
Actually I was trying to get the concept of the module pattern. Here I have simple code which I used to type directly on the page. It was fine until I tried to separate the actual code from the HTML file and kept only a single line of code on the main HTML file:
<body>
<script type='text/javascript' src='module.js'>
// module.JS file was here ....
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
</body>
File module.JS
var module = (function() {
return {
show:function(keyCode){
document.body.innerHTML+=(String.fromCharCode(keyCode));
}
};
})();
You'll need to have two <script> elements for this.
Use one to "import" your external module and another for the script you want to embed directly on the page:
<script type='text/javascript' src='module.js'></script>
<script type='text/javascript'>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
For more information, you can check out this MDN documentation page. Here is an excerpt talking about the src attribute (emphasis added):
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. Script elements with an src attribute specified should not have a script embedded within its tags.
A script block referring to an external JavaScript source should be separate and any script inside of it does not get executed. So you need two separate script blocks one for the external JavaScript file and the other for your script.
<script src='module.js'></script>
<script>
document.body.addEventListener('keypress',function(e){module.show(e.keyCode)});
</script>
I have in my application layout file an external javascript file witch has several lines of code and at the end runs a function like BooManager.init() no big deal...
the problem is, it is not running the inside code on this javascript file.
this is how i use it:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "iphone4s, apple";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<%= javascript_include_tag "http://widgets.boo-box.com/javascripts/embed.js" %>
but it didn`t do anything it was suposed to do...
i`ve tried in simple html file and it works... what am i doing wrong?
NOTE:
the default way in html is this:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "keywords, between, commas";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
-- EDIT --
the result generated by rails:
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
It's not evaluating the script when loading using the <%= method. I'm not familiar with that syntax, but from the effect, that's what it sounds like. It's treating the script as html rather than code.
jQuery has a script load function that will get a script dynamically from a URL and then eval() it to execute it.
UPDATED WITH SAMPLE CODE
Add jQuery to your app:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then use it to load your script:
$.getScript('http://widgets.boo-box.com/javascripts/embed.js');
UPDATE NUMBER 2
I was able to duplicate the problem in this fiddle: http://jsfiddle.net/7x2zT/4/
If what you are trying to accomplish is to get your parameters activated before the script shows the widget - the default one looks like a sidebar, whereas your parameters make it more of a banner, then just make sure you put your parameters above the <script src stuff.
If you must be able to load dynamically, then you're going to have to figure out where the bug lies in the embed code, or if there's some other activation method. That site's documentation doesn't seem to be in English, so I can't help with that.
Am trying to call a JS script from a function library in another script.
Eg. iceCreams.Js contains --->
iceCream(iceCreams){
var profit = .54
var Total = iceCreams * profits
return Total;
}
register.js contains -->
dailyTotals(wages, iceCreams){
var total = iceCream(iceCreams);
var profit = iceCreaps - wages
return wages;
}
Any help pointing me in the right direction?!
Make sure your page loads the iceCream.Js before the register.js:
<html>
...
<script type="text/javascript" src="iceCream.Js"></script>
<!-- now you can use functions in iceCream.Js in your register.js -->
<script type="text/javascript" src="register.js"></script>
....
</html>
Running the javascripts is done in client side and after rendering the full html. So, you have to add script tag for the library javascripts before consuming ones.
Just add script tag for the library before the one for register:
<script type="text/javascript" src="iceCreams.Js"></script>
<script type="text/javascript" src="register.js"></script>
Both script files must be referenced on the page they are used.
Additionally, to get IntelliSense in Visual Studio to work within the script, add the following line to the top of register.js:
/// <reference path="iceCreams.js" />