UIWebView doesn't load external JavaScript file

Question

I have the following innocent-looking code (index.html), but it doesn't load the code.js file. It works well if I copy/paste the contents of the file in the HTML page. Both index.html and code.js files are in the same directory.

index.html:

<html>
<head>
<script type="text/javascript" src="code.js"></script>
</head> 
<body onload="drawImage()">
  <div><canvas id="canvas" width="320" height="480"></canvas></div> 
</body>
</html>

ViewController.m:

- (void)viewDidLoad {
  [super viewDidLoad];
// load the first webpage
[homePageWebView loadRequest:[NSURLRequest requestWithURL:[NSURLfileURLWithPath:
  [[NSBundle mainBundle] pathForResource:@"index"ofType:@"html"] isDirectory:NO]]];
}

score 59 · Accepted Answer · answered Sep 02 '10 at 17:13

59

I have found that Xcode thinks that the js file needs to be compiled.

Open the project in Xcode. Go to "Targets" and look in "Compile Sources". If you see your js file in that folder, move it to the "Copy Bundle Resources" folder and delete it from the "Compile Sources" folder.

Delete the app from your iPhone if it is installed already for testing. Go to the Build menu in Xcode and Clean all Targets. Then recompile.

Check now to see if your HTML file actually sees your js file now.

Linda

answered Sep 02 '10 at 17:13

Linda

1,973
4
21
24

1

And where does one find "Targets" in Xcode? I'm running the latest version doing ipad dev and there is no such named screen.... – Jason Mar 18 '11 at 03:50
oh wait i found it. It's a bucket on the left hand side – Jason Mar 18 '11 at 03:55
ehm... if you found your answer. Please close the question :) – Tokimon Mar 18 '11 at 15:22
well done linda. I think just to clarify for those of us that don't use xcode much. Targets is on the left in the tree menu. It has a picture of a red and white arrow board or dart board. when you click to open it, it expands like hitting the arrow on a folder in mac's FINDER – Jason Mar 22 '11 at 04:21
Thats awesome...That wasn't obvious at all. Jason you need to look under the tab "Build Phases" when you are on Targets. – DevNull Aug 18 '12 at 19:54
3

I cant get it to work with the js files located in a subfolder. Only works when the js files is in the same folder as the html file :/ – DevNull Aug 18 '12 at 20:44
Unless i clean and build the project...every time when making changes to a js file – DevNull Aug 18 '12 at 21:00
2

To be precise: Click on your project in the project navigator on the left. The main pane should now have a sidepane on the left. This sidepane should have "PROJECT" and "TARGETS". Click on you project under the "TARGETS" heading. The pane to the right should now have a bunch of tab headings going "Summary", "Info"... etc. Click on "Build Phases". This should then show a bunch of subsections. Open up the sections "Compile Sources" and "Copy Bundle Resources." Then, click and drag ALL the javascript files from the "Compile Sources" section to the "Copy Bundle Resources" section. – Sofox Mar 15 '13 at 12:56
Just a small "correction" xcode will not compile the javascript. It will embedded it into myIpaApp.ipa/myJavaScript.js – Martin Magakian Jul 18 '13 at 03:07
I love you @Linda!. I have been fighting this for ages. This was driving me crazy. Thanks to @DevNull too. I can't make it work within a subdirectory neither but it doesn't mind. I'm happy :) – rmvz3 Oct 22 '13 at 01:37
I worked for me. I still wonder though why it has moved my .js as a file to compiled this time (it was in the copy before). – Stéphane de Luca Feb 18 '14 at 22:22
Is there any chance we can do this without XCode ? I am working with Ionic , cordova AND I would Like to include external scrips like Stripe in the header – pszaba May 22 '21 at 20:32

score 7 · Answer 2 · edited May 09 '13 at 01:31

7

You need to read the html file into a string and set the baseURL when loading so relative paths can be understood.

NSError* error;
NSString* html = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"] encoding:NSASCIIStringEncoding error:&error];

[webview loadHTMLString:html baseURL:[self getBaseURL]];

- (NSURL*) getBaseURL {
    NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSRange r = [path rangeOfString:@"/" options:NSBackwardsSearch];
    path = [path substringToIndex:r.location];

    path = [path stringByReplacingOccurrencesOfString:@"/" withString:@"//"];
    path = [path stringByReplacingOccurrencesOfString:@" " withString:@"%20"];
    path = [NSString stringWithFormat:@"file:/%@//",path];
    return  [NSURL URLWithString:path];
}

Something like that should work for you.

edited May 09 '13 at 01:31

Harry Wood

2,220
2
24
46

answered Aug 31 '10 at 05:37

skorulis

4,361
6
32
43

I think if you set base in the header of the HTML document, it will work too, and will not require any additional code. – spbfox Aug 31 '10 at 05:42
How do you set the base header for a local file. It tried by putting and in the , but still doesnt work. Can you give me an example please. – Amarsh Aug 31 '10 at 05:53
How could you know what the base URL of the file is going to be ahead of time? It would change depending on where it was deployed. – skorulis Aug 31 '10 at 06:18
oh so sorry, it wasnt clear above, all the files are in the resource bundle, and hence local to the app. – Amarsh Aug 31 '10 at 06:24
This should not be needed. Loading a local `file://` url will work fine. – Alex Wayne Sep 02 '10 at 17:14
'file://' doesn't work squeegy. My JS file is located in my resources folder. neither does the code that skorulis sent through – Jason Mar 18 '11 at 03:51
Using this getBaseURL function worked a treat for me! All files are in the resources folder but js and images weren't showing up until I got the base URL correct. Thanks @skorulis! – David Conlisk Jul 10 '11 at 12:54
Why use pathForResource instead of URLForResource? – Mar 19 '15 at 19:12

score 6 · Answer 3 · answered Nov 02 '12 at 08:49

6

To supplement Linda's Answer here is where you find the files:

enter image description here

answered Nov 02 '12 at 08:49

NSRover

932
1
12
29

score 5 · Answer 4 · edited Jul 17 '12 at 16:13

5

I also faced the same problem: I overcame it by doing the simple thing when adding the files to XCode I did a small change that is shown in the figure below:

In the figure below, one is for adding HTML, Javascript and CSS like files and the second is for general XCode files.

for HTML, Javascript and CSS files

For general XCode files

edited Jul 17 '12 at 16:13

dda

6,030
2
25
34

answered Jul 02 '12 at 10:44

Teja Swaroop

1,139
12
18

1

Simple and effective solution :) – Syn3sthete Sep 09 '15 at 07:00

UIWebView doesn't load external JavaScript file

4 Answers4

Linked