Using 3rd party script in html - javascript

So actually i am not much familiar with javascript that's why i am going to post it to know something that i am going to know,
So here it is,
Suppose i have html page and hosted on some where on internet and its coding is,
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
</body>
</html>
In this code Link anchor text use for hyperlink, I would like to use javascript that call from another site, where the link exist and it display over there like this.
<script type="text/javascript" src="http://mysite.com/java.js">
I want to know that what code i put on java.js so it show the hyperlink in my html file and how and where do i add code to html page and in javascript
Advance Thanks for help :)

Apologies in advance if I misunderstood your question, but it sounds like you'd like to use JavaScript from another location on your site.
Using the example above, here's what that would look like:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......</p>
The link of the document ......
<script type="text/javascript" src="http://mysite.com/java.js"></script>
</body>
</html>
You could also link to it in the <head> instead, but it's better for performance if the scripts are placed in the footer.

your anchor:
href="javascript:linksomething()"
and js:
function linksomething(){
window.location.href=url;
}
is this what you want?

Related

why script doesnt run?

Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>

Page redirect using the javascript "Form" method

I set up a page redirect using javascript, and the "Form" method from the following website:
https://webworkshop.net/auto-redirecting_methods
I set this up a few weeks ago, and it worked fine then. However, when I looked at it the other day it was no longer working.
Can anyone shed any light on this?
Thanks
Mark
It looks like you're simply wanting to redirect:
You can do it with JavaScript and HTML Meta tags
<!doctype>
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.yourdomain.com/new-page.html">
</head>
<body>
Auto refresh in 0 seconds
</body>
</html>
The other method is by using JavaScript, like below:
<!doctype>
<html>
<head>
<script>
window.location = 'http://www.yourdomain.com/new-page.html';
</script>
</head>
<body>
This would also redirect as soon as the page loads.
</body>
</html>
Hope that helps

Change content in DIV based on link click

I found this script, that i want to implement into my webside.
http://codepen.io/johnmotyljr/pen/qhvue
It does exactly what i want it to do, BUT! I don't know how to put into my webside?! Where to put the JS and how?
The content that i need to change is stored in an html-file, but how do i get that content into my div with this script?
Hope you can understand what i'm asking for and sorry for my limited/bad english!
View the source code of your link, find the <iframe> tab, and the demo html is inside.
You can load that content via AJAX. So, building on the CodePen-example you gave, you could do something like this:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Where kittens.html is the URL of the html file you want to load.
Update:
Now that you have posted a link to your website, I notice a few more things:
You haven't got jQuery included. Between you <head></head> tags you
should include <script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Probably, you want the Resultater | Billeder | Video | Afkom links to load different content, right? Then, you should use
something like this:
In between <script type="text/javascript"></script>:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
try this type of method.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>

Beginner JavaScript: using src

EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.

Get javascript to write text exactly where it is

is it possible to get javascript to output html where the javascript code is?
For example
<html>
<head>
<title>
</title>
</head>
<body>
<div>header</div>
<div>main
<script type="text/javascript" language="javascript">
// print some html here, maybe google
</script>
</div>
<div>footer</div>
</body>
</html>
Where the end results would look like:
<html>
<head>
<title>
</title>
</head>
<body>
<div>header</div>
<div>maingoogle</div>
</script>
</div>
<div>footer</div>
</body>
</html>
I understand that I can give the containing div and id and then get javascript to insert the anchor take like that, but I just wanted to know if it's possible to do this directly, as in write the html exactly where the javascript is?
Use document.write('YOUR_TEXT') for that
<script type="text/javascript" language="javascript">
document.write('google')
</script>
jsFiddle demo
Yes, although there are a lot of nuances to document.write, it'll output its contents immediately after the calling script element.
warning: document.write will obliterate your DOM once the dom is closed for writing. If you need to call a function asynchronously, you'll have to do DOM manipulation, otherwise document.write will rewrite everything with whatever it's supposed to output. This leads to unintentional results, which is why it's often discouraged.

Categories

Resources