Use JQuery to Modify external JS File

Question

I don't know if this possible so I apologize in advance if this question comes off as being a little ignorant. I am working a website that must use a template and server-side languages such as PHP are disallowed. There is an external JS file on the website that I would like to modify but I cannot figure out how to access/modify it from the main script using JQuery.

In case that was not clear, here is an example:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="fileToModify.js"></script>
<title>Untitled Document</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>code to modify external file goes here</script>
</body>
</html>

In the above example, I would like to be able to place code (in JQuery/JS/some other language like that) where it says "code to modify external file goes here" and alter the local copy of "fileToModify.js" (for example, to delete a function within it). I am aware that, if successful, such a deletion could not alter the real file hosted on the server; I am only trying to alter the local copy when the user downloads it to change how it behaves after the page loads).

Would such a task be possible with JQuery/JS/something of the sort?

Thanks for your help

you cannot modify a file on a server with javascript alone. You could fetch the file contents and put into a string and modify it and then eval() it but that could cause issues. — Patrick Evans
– Patrick Evans, Commented Jan 28, 2014 at 3:42
@PatrickEvans I know - as stated above, I would like to modify the local copy of it after the browser downloads the external JS file (not the real file hosted server-side) — cryptopi
– cryptopi, Commented Jan 28, 2014 at 3:43
javascript does not have access to the temporary files, or file system for that matter. There is the File System Api but its not widely implemented and i do not know if it even lets you to request access to those areas. — Patrick Evans
– Patrick Evans, Commented Jan 28, 2014 at 3:45
@PatrickEvans Oh. That is what I was asking. Thanks for telling me that, good to know and unfortunately means that my task will probably be impossible — cryptopi
– cryptopi, Commented Jan 28, 2014 at 3:45
Well you could do what i suggested grab the contents of the js file through ajax modify them and then eval them, but again like i said that could open up security holes if not handled properly. — Patrick Evans
– Patrick Evans, Commented Jan 28, 2014 at 3:47

ykay says Reinstate Monica · Accepted Answer · 2016-09-29 17:05:48Z

7

You can use ajax to get the contents of the file (and not execute it), then do use javascript to replace some of the data. Then you could use eval to execute it.

$.ajax({
  method: 'GET',
  dataType: 'text',
  url: 'to-modify.js'
}).then(function(data) {
  data = data.replace('bar();', '')
  eval(data)
})

Live demo (click)

edited Sep 29, 2016 at 17:05

ykay says Reinstate Monica

4,9224 gold badges35 silver badges44 bronze badges

answered Jan 28, 2014 at 3:43

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cryptopi Over a year ago

That would be most helpful if you could make a demo :)

cryptopi Over a year ago

Thank you for the helpful demonstration, it should be most useful

Collectives™ on Stack Overflow

Use JQuery to Modify external JS File

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related