Check Webpage is Actually using Javascript or Not - javascript

This is the following example of what I want to achieve.
<html>
<head>
<script type="" src="abc.js"></script>
<script type="" src="pqr.js"></script>
</head>
</html>
Above is one webpage of any domain.It contains 2 javascript path.I want to know wheather this javasripts are actually being used in the webpage OR it is only declaration of javascript files but not calling any of the javascript function in the webpage.

Both of Javascript files and any other <script> tags you include in the HTML will be included and they will execute what you tell then to execute inside JavaScript

You can set a variable on top of each file you include and check whether that variable is set or not in the position you want to know it.

It depends on if you are in control of those source files or not. If you are, then as already suggested you can simply put an alert or any other kind of flag in each file, and see if they occur on the host page.
If you are not in control of those source files, then you can use a javascript debugger to place breakpoints within each of the files and then reload the page. If the breakpoints get hit, obviously the code is being executed.

Related

Adding a JavaScript embed to HTML

I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>

Add script to script that contains document.write won't execute

We're using a webprogram that uses ajax and jquery and the like (Netsuite). I want to change something on a page and have tried to use document.ready and window.load to get an external script loaded on the page. I've tried to load the external script in the head and body.. but the contents aren't written. The external file looks for a specific div id and then prepends some code to that. It never works, because the page itself loads dynamically and the div I'm looking for loads when the rest of the page is done. So window.load, etc. never work...
At last I'm in the program itself that loads parts and pieces and am trying to simply write the external script file in there. Now this time the external file has a simple document.write in it, so it's straightforward. In other words, the script is in the middle of html code in the body of the page. (I know this is a terrible way of doing it, but I've got to try something to get this to work....)
According to firebug, it writes the external file where it should be (check!) and firebug shows me the contents of that file (check!), but ... it never 'writes' it onto the page...
The file just contains this:
document.write('<div id="shpblk" style="border:2px solid #ffa500;border-radius:7px;color:#000066;margin:5px;padding:5px;text-align:left;"><img border="0" width="12" height="12" src="/images/icons/store/icon_exclamation2c.gif">Hazardous conditions blahblah... Potential delays and disruptions can be anticipated.</div>');
What am I missing?
Edit: some more clarification is necessary...:
Situation: I have to be able to put a piece of html on the page every now and then that creates a message.
Environment: What I have is a page that loads a header and footer first (which are set up in separate files) and then it takes a second or so to load the rest of the page. From what I understand, this "rest of the page" is written in a certain code, similar to javascript/jquery.
What I CAN do is: edit the files for the header and footer and put javascript in there to make modifications to the rest of the page. I can access some of the files that contain parts and pieces of the "rest of the page", but this is a huge pile of spaghetti.
What I've tried:
Since I want to be flexible with the html that I need to put into the page, I preferably would like to create a piece of javascript or html or whatever on another site and have the "environment" pick up that code. I can do this with javascript or iframe. But since it's a secure area (https), I thought it would be best to use a javascript file instead of an iframe. So....
I created the javascript file and tried it out in a normal environment where I knew for sure it would work.. and it works like a charm. But when I tried this in the before mentioned "environment", I am running against a wall...
The javascript file has document.ready jquery statement in it and it would prepend the html div to an existing div on the page.
This way it would load the page and write the page.. easy as pie.
However.. since the header and footer load first (which includes the external script file), and then the rest of the page, SOMEHOW the div where the script checks for DOES NOT EXIST YET. So I tried window.load instead of document.ready. Same result.
Now, it WOULD appear ONLY when I refresh the page. So there may be a way to have it refresh the page, but I only want this as the absolute last attempt.
So then I tried to see if I could go around this by changing the script so that, instead of using a document.ready it would just do a simple javascript document.write statement.
Then I call the script in the middle of the body of the page (I put it in one of the files that load in the middle of the page). I know this is not something I would do normally, but wanted to try it out anyway. So.... I would have something like this:
<div id="block1">
<div id="block2">stuff here<div>
<script type="text/javascript" src="https://someotherdomain.com/include.js" ></script>
<div id="block3">stuff here<div>
<div id="block4">stuff here<div>
</div>
Now when I run this, I do not get any errors, but nothing is being done with the contents of that js file. In firebug it shows me the contents of that file though.. so I assume it's being read.
But I have no idea why it doesn't run.
Again.. back to 'normal' practices: I've tried window.load, because this would run the statement after the page loads, HOWEVER.. like I said before, I have the feeling it builds the contents of the (middle of the) page through this somehow and my script runs before this; it cannot find the div (block3) where it would prepend to. Whenever I stop running the page at my script, the div it's depending on doesn't exist yet...
I hope this made sense...
Solution
For the external script file to work as expected, OP will need to load it using an asynchronous script tag like this:
<script type="text/javascript" src="include.js" ></script>
Yet, the file contains a document.write() statement, which is generally something to avoid. A better alternative would be remove document.write() from the file and save it as a plain HTML file. This could then be safely loaded using using jQuery:
$("#include1").load("include.html");
( Requires adding a target DIV to the page where the content should load. )
DETAILS
The question doesn't tell us how the external file is included on the page. And without that information it's difficult to understand the problem or provide a solution ... which is probably why this question has gone unanswered.
Yet, let's assume the the script is being injected into the page on the client side using JavaScript or jQuery. And if that's true then it will fail if not done the correct way.
Let's look at some ways we might add the script to the page:
These script tags will all fail because the file contains a document.write statement and the script is loaded asynchronously.
<script type="text/javascript" src="include.js" async ></script>
<script type="text/javascript" src="include.js" defer ></script>
<script type="text/javascript" src="include.js" async defer ></script>
The browser does load the file, but reports:
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script unless
it is explicitly opened.
This jQuery sort of works. It loads the script, but the document.write implicitly calls document.open, which erases the original content of the page. That's probably not what OP wants.
$.getScript('include.js');
This synchronous method works so long as the document.write is executed on load, i.e., is not inside function called later. So this is a possible solution for OP.
<script type="text/javascript" src="include.js" ></script>

Multiple HTML files linked to only one Javascript file

I want to have functions in an external Javascript file to be linked to each of my html files. However, I want some functions to be linked to one html file while other functions would be linked to a different html file. Do I need to have multiple Javascript files or can I condense them into only one file? When I tried to use one Javascript file every function would run on each of my pages. Is there a way to call a specific function in html without having the whole code? Like with css using #example for the id example in html.
I used this link in my index.html file:
<script type="text/javascript" src="example.js"></script>
While this one was in another html file:
<script type="text/javascript" src="example2.js"></script>
These links are the only Javascript included in my html files.
I think I found the problem. I have an RSS feed that comes through a free website but the function doesn't have anything next to it.
The html file links to the Javascript file with this in it and because the function is blank it automatically runs or that's what i'm assuming.
(function(){
var a=window;
var b="";
for(i=0;i<a.rssfeed_url.length;i++) {
b=b+"rssfeed[url]["+i+"]="+encodeURIComponent(a.rssfeed_url[i])+"&"
}
var c="http://feed.surfing-waves.com/php/rssfeed.php"+"?"+b+"rssfeed[type]="+(a.rssfeed_type?a.rssfeed_type:"")+"&rssfeed[frame_width]="+a.rssfeed_frame_width+"&rssfeed[frame_height]="+a.rssfeed_frame_height+"&rssfeed[scroll]="+(a.rssfeed_scroll?a.rssfeed_scroll:"")+"&rssfeed[scroll_step]="+(a.rssfeed_scroll_step?a.rssfeed_scroll_step:"")+"&rssfeed[scroll_bar]="+(a.rssfeed_scroll_bar?a.rssfeed_scroll_bar:"")+"&rssfeed[target]="+(a.rssfeed_target?a.rssfeed_target:"")+"&rssfeed[font_size]="+(a.rssfeed_font_size?a.rssfeed_font_size:"")+"&rssfeed[font_face]="+(a.rssfeed_font_face?a.rssfeed_font_face:"")+"&rssfeed[border]="+(a.rssfeed_border?a.rssfeed_border:"")+"&rssfeed[css_url]="+(a.rssfeed_css_url?encodeURIComponent(a.rssfeed_css_url):"")+"&rssfeed[title]="+(a.rssfeed_title?a.rssfeed_title:"")+"&rssfeed[title_name]="+(a.rssfeed_title_name?a.rssfeed_title_name:"")+"&rssfeed[title_bgcolor]="+(a.rssfeed_title_bgcolor?encodeURIComponent(a.rssfeed_title_bgcolor):"")+"&rssfeed[title_color]="+(a.rssfeed_title_color?encodeURIComponent(a.rssfeed_title_color):"")+"&rssfeed[title_bgimage]="+(a.rssfeed_title_bgimage?encodeURIComponent(a.rssfeed_title_bgimage):"")+"&rssfeed[footer]="+(a.rssfeed_footer?a.rssfeed_footer:"")+"&rssfeed[footer_name]="+(a.rssfeed_footer_name?a.rssfeed_footer_name:"")+"&rssfeed[footer_bgcolor]="+(a.rssfeed_footer_bgcolor?encodeURIComponent(a.rssfeed_footer_bgcolor):"")+"&rssfeed[footer_color]="+(a.rssfeed_footer_color?encodeURIComponent(a.rssfeed_footer_color):"")+"&rssfeed[footer_bgimage]="+(a.rssfeed_footer_bgimage?encodeURIComponent(a.rssfeed_footer_bgimage):"")+"&rssfeed[item_bgcolor]="+(a.rssfeed_item_bgcolor?encodeURIComponent(a.rssfeed_item_bgcolor):"")+"&rssfeed[item_bgimage]="+(a.rssfeed_item_bgimage?encodeURIComponent(a.rssfeed_item_bgimage):"")+"&rssfeed[item_title_length]="+(a.rssfeed_item_title_length?a.rssfeed_item_title_length:"")+"&rssfeed[item_title_color]="+(a.rssfeed_item_title_color?encodeURIComponent(a.rssfeed_item_title_color):"")+"&rssfeed[item_border_bottom]="+(a.rssfeed_item_border_bottom?a.rssfeed_item_border_bottom:"")+"&rssfeed[item_source_icon]="+(a.rssfeed_item_source_icon?a.rssfeed_item_source_icon:"")+"&rssfeed[item_date]="+(a.rssfeed_item_date?a.rssfeed_item_date:"")+"&rssfeed[item_description]="+(a.rssfeed_item_description?a.rssfeed_item_description:"")+"&rssfeed[item_description_length]="+(a.rssfeed_item_description_length?a.rssfeed_item_description_length:"")+"&rssfeed[item_description_color]="+(a.rssfeed_item_description_color?encodeURIComponent(a.rssfeed_item_description_color):"")+"&rssfeed[item_description_link_color]="+(a.rssfeed_item_description_link_color?encodeURIComponent(a.rssfeed_item_description_link_color):"")+"&rssfeed[item_description_tag]="+(a.rssfeed_item_description_tag?a.rssfeed_item_description_tag:"")+"&rssfeed[no_items]="+(a.rssfeed_no_items?a.rssfeed_no_items:"")+"&rssfeed[cache]="+(a.rssfeed_cache?a.rssfeed_cache:"");
if(a.rssfeed_border!="off"&&!a.rssfeed_css_url){}
document.write('<iframe name="rssfeed_frame" width="'+a.rssfeed_frame_width+'" height="'+a.rssfeed_frame_height+'" frameborder="0" src="'+c+'" marginwidth="0" marginheight="0" vspace="0" hspace="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>')
})()
The only problem now is that I don't know how to call the function. Another function I have is called because I have onClick="example()" which is fine for that but the RSS feed needs to load automatically. I don't want to have to click a button to get the feed to appear.
Functions only run if you call them. So you can have one JS file that contains functions that are never called by one HTML file, and nothing goes wrong -- they have no impact on the functioning of the page. The only downside of extra unused code is that is takes longer to load, but that isn't really significant until the file gets very big.
You could have a file named "common.js" that holds all related JavaScript functionality. But you will need separate JavaScript (either in a separate file or embedded in the HTML page itself) to make specific use of the common functionality according to the needs of the different pages.
After seeing some code, one may be able to provide a better answer.
It's more logical to split your javascript code into multiple files where it is appropriate. But you don't have to run any code in your javascript file even if it is linked to your html page if you put your code into functions.
function myFunction()
{
// do something.
}
The code inside this function won't run unless you call it in your html.
<body onload="myFunction()">
...
</body>
I think you can do that for example by adding id or class to the html or body, and then, write conditions, if the element (html or body) contains the id/class execute the appropriate functions.
When are the functions called? On page load?
If you provide sample code, it would be better.
You can use location.pathname and check the path and use switch or if else

Where do I put the $(document).ready()?

I've been trying to add JavaScript to my HTML/CSS, but been running around in circles.
My current set-up is where the html, CSS, and JavaScript files (2 files; my JavaScript code, and jQuery's code) are all separate, but linked to each other via the html page.
So here are my questions:
1) Do I put the link to the jQuery code within the html head? Or within my JavaScript code page?
2) Where does this code go? The html page, or my JavaScript page?
$(document).ready(function(){
//Code here
});
3) Above, by 'code here', they mean JavaScript code, right? Not my html code?
4) I've read about initializing JavaScript code at the bottom of an html page. From what I take though, I don't have to do that with jQuery's .ready function, right?
You should like to your JavaScript files either in the <head> or above the closing </body> tag.
The code can go anywhere really, but I would suggest an external JavaScript page.
Yes
This is correct.
When Javascript code is executing in your browser, all of your included Javascript files and any code you write in-between those "script" tags in the HTML document is going to be executed as though it were all part of one giant file (same namespace). So in some sense, it doesn't matter whether you write your code in the HTML document or whether you write it in an external file that you include - you're free to do either, and it will be executed the same. You can balance maintainability, reusability and convenience (think about what functions you write that you might want to reuse on other pages) and do whichever you feel is best.
To make this concrete - this is one valid way to write your Javascript, if you wanted to write the code inside your HTML file:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('Document Ready!');
});
</script>
</head>
<body>
...
Here's the intro at the jQuery site, for reference:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Writing your Javascript code at the bottom of the HTML page was/is a technique for getting it to execute as soon as the document is loaded, which is unnecessary when using jQuery's '$(document).ready' (that's what it does - it abstracts the business of getting Javascript functions to execute on page load, and implements it in a cross-browser way).
See: Introducing $(document).ready() for more.
It doesn't really matter where you place your jQuery code. If you place it in the head tag, it'll automatically load everything. If you decide to place it all in an external JavaScript file, you need to link it with a <script type="text/javascript" src="my_file.js"></script> tag.
The 'code here' part is only for JavaScript. What the code is saying is that when the document is ready, run this function. The function can be whatever you like - whatever you put inside the function will run when the document is ready (i.e. when the webpage is called by the browser).
You don't need to insert it at the bottom of the HTML page - you can do it anywhere. People only insert it at the bottom to optimize their loading speed. It's nonessential.
$(document).ready(function(){
//Code here
});
goes in your javascript file. All javascript code that should be executed once the page has loaded goes where the //Code here comment is.
Perhaps a quick jQuery tutorial would be in order?
Or, you can put your script tag in the bottom of your body, and not have to use the $(document).ready() function.
Put in the head. This is the most stable way and it works. Some people may disagree and say it is slower, etc, but I have found this to always work.
Where you put your code is up to you. You can put in your head with a
<script>Code here</script>
or in a separate file and include it with
<script src="reftomyscript.js"></script>
Yes, put your javascript code in this, either in the head or in a separate file.
Yes, and see (1)

Programmatically remove <script src="/unwanted.js".. /> reference

I have partial control of a web page where by I can enter snippets of code at various places, but I cannot remove any preexisting code.
There is a script reference midway through the page
<script src="/unwanted.js" type="text/javascript"></script>
but I do not want the script to load. I cannot access the unwanted.js file. Is there anyway I can use javascript executing above this refernce to cause the unwanted.js file not to load?
Edit: To answer the comments asking what and why:
I'm setting up a Stack Exchange site and the WMD* js file loads halfway down the page. SE will allow you to insert HTML in various parts of the page - so you can have your custom header and footer etc. I want to override the standard WMD code with my own version of it.
I can get around the problem by just loading javascript after the original WMD script loads and replacing the functions with my own - but it would be nice not to have such a large chunk of JS load needlessly.
*WMD = the mark down editor used here at SO, and on the SE sites.
In short, you can't. Even if there is a hack, it would heavily depend on the way browsers parse the HTML and load the scripts and hence wouldn't be compatible with all browsers.
Please tell us exactly what you can and cannot do, and (preferably; this sounds fascinating) why.
If you can, try inserting <!-- before the script include and --> afterwards to comment it out.
Alternatively, look through the script file and see if there's any way that you could break it or nullify its effects. (this would depend entirely on the script itself; if you want more specific advice, please post more details, or preferably, the script itself.
Could you start an HTML comment above it and end below it in another block?
What does the contents of unwanted.js look like?
You can remove a script from the DOM after it is called by using something simple such as:
s = document.getElementById ("my_script");
s.parentNode.removeChild(s);
This will stop all functions of the script but will not take it out of user's cache. However like you wanted it can't be used.
Basically you can't unless you have access to the page content before you render it.
If you can manipulate the HTML before you send it off to the browser, you can write a regular expression that will match the desired piece of code, and remove it.

Categories

Resources