Uiwebview Local Html Javascript File

Active1 year, 2 months ago

I'm working on a Iphone app that needs to open remote html files and use local images.I found this answer and it's the perfect solution for me :

but the problem is that this solution loads only the first image when I'm trying to load more images, like so :

The page will display the first image right but the other images will display the source of the first.

Community
user1920678user1920678

Set the src attribute of the webview to a data URL that has a reference to a local resource (e.g. Image tag) open the app and listen to the console-message event on the webview => Not allowed to load local resource: file:///C://1.jpg; It would be nice if for a webview you could bypass this security measure when you set a data URL. I load a local html file (from assets folder) to the app WebView. In the HTML I run a jQuery.getJSON(url). The url is a remote server. This action fails, and I’m guessing because of a different origin issue (cross domain). Load local html file with javascript into webview android Juned Mughal December 28, 2015 March 29, 2016 Android Examples Tutorials Call JavaScript through assets folder inside android setup apk file and set into webview using web page.

3 Answers

Why are you using custom protocol implementations for loading local images in a html file ?

  1. Before the example React Native Load Local HTML File in WebView, we are hoping you have visited our Webview Example in which we have loaded the HTML page from URL. Here is the example of how to show webpage from the locally available HTML file.
  2. Override a remote HTML with a local Javascript file in UiWebView? Ask Question. We plan to load an external blank HTML file (served from Drupal) from our server through the UIWebView and would like the CSS and Javascript to be loaded from the local device. Website sends bare-bone non-styled HTML and the app loads the local CSS and JS to.

You can easily set the root of the html to the following :

This will load all image files from your bundle.

Or, you can override the load call, with a webview delegate like so :

And there completely customize how and where files should be loaded.

Nils MunchNils Munch
6,71910 gold badges45 silver badges100 bronze badges

you can use the same idea in iOS WebView remote html with local image filesbut, use different custom protocol name for each imageFor example

Then ask which protocol name used in the canInitWithRequest method, then you can know which image you will load in startLoading method.

Note : canInitWithRequest is a class method therefore you can declare a static variable to hold the image file name in canInitWithRequest method

Community
user2295896user2295896

WKWebView doesn't allow files to be accessed from file storage(Document directory) directly, to access file from document directory you have to use loadFileURL:allowingReadAccessToURL: method, below is my code.

In ViewDidLoad

Above code saves an image from bundle to document directory, also it saves an html file(which will use img tag to load image).

Javascript Local File Path

Below didFinishNavigation:

Utility Method to get file url

and last the HTML file which has methods to get path from webview and load image

Above method is only way I found to load image/files from document directory.

You can also send your image/file in form of data url and pass it to the javascript method(already written in html file), just convert your image to NSData and base encode to string, javascript will convert the data url to image object itself.

UIImage to data URL conversion:

Cheers !!!

Uiwebview Local Html Javascript File Converter

Harish PathakHarish Pathak

Not the answer you're looking for? Browse other questions tagged iphoneobjective-cios or ask your own question.

Active2 years, 1 month ago

I need to load javascript files from my apps resources folder. As of right now, it does read images from the resources just fine, but it's not reading javascripts for some reason.

I have been able to render html docs that reference these javascripts if the html files themselves are written into the resources, but I would like to render html/js by setting the html of a UIWebView so it can be dynamic.

Here is what I am doing:

Now, if I change the base url to my server which also has the required files, it does load correctly. It would be great to not require an internet connection. Any help is appreciated!!! ;)

I found this useful in getting images to display: iPhone Dev: UIWebView baseUrl to resources in Documents folder not App bundle

Edit:

Instead of doing the string replacing and URL encoding, I was able to get images to by simply calling resourceURL on the mainBundle, but still no javascript execution.

EDIT

If you want to help give this a shot, I have made it easier for you by creating an example project!

Uiwebview Local Html Javascript File File

Community
pyramationpyramation
7303 gold badges13 silver badges32 bronze badges

4 Answers

Here we go with a simple setup.

Create the following folder structure in your Resources folder.

Note that the blue folders are referenced ones

The css is just candy :) In lib.js resides your javascript code which you'd like to use.

index.html

lib.js

Loading of the content in the webview

Note: webView is a property, view created with instance builder

And this should be the results:

EDIT:

snowman4415 mentioned that iOS 7 does not like self closing tags script tags, so if something is not working on iOS 7, you may need to close the tag with </script>

Nick WeaverNick Weaver
46.1k12 gold badges92 silver badges105 bronze badges

Here is another way to inject a local javascript file into the DOM of a web view. You load the contents of the JS file into a string and then use stringByEvalutatingJavaScriptFromString:

This is especially useful when you don't own the *.html/xhtml files you are displaying (i.e. ePub reader. or news aggregator). It helps so that you don't have to worry about the relative paths from your xhtml file to your js file.

TPoschelTPoschel
3,2902 gold badges23 silver badges24 bronze badges

This is how I did using Webview and local JS. Putting some snapshots here a sample project here

1 PeToUSB is a Win32 GUI application for formatting and making bootable, USB Flash Memory Drives and USB HardDisks and optionally copying the output from a successful BartPE/WinPE build to the device. Size: 0, Price: Free, License: Freeware, Author: Rich Burnham (gocoding.com) 2 Lightweight, fast and portable browser: Size of executable is 6MB only, no additional DLLs or other files required; Command Line Scripting supported; Can be run in limited Windows environment (WinPE), like Active@ Boot Disk, or BartPE running from CD. Size: 29.2 MB, Price: USD $38.00, EUR 29.95, License: Shareware, Author: PrimeExpert Software (esd.element5.com) 4 Passcape ISO Burner is an advanced solution that enables even inexperienced users to create bootable CD, DVD or USB disks from ISO images quickly and conveniently. PeToUSB is a Win32 GUI application for formatting. Size: 7.3 MB, Price: Free, License: Freeware, Author: QtWeb.Net (qtweb.net) 3 * Convert Windows XP, Windows Vista, Windows 7 installation CD/DVD disc to bootable USB disk (usable for installation of these OSes on netbooks and other devices without CD/DVD drive) * Create USB disk to reset password for any user of Windows XP/Vista/7 * Extract Windows XP recovery console from Windows XP installation CD to bootable USB disk * Convert BartPE bootable CD to. Bartpe windows 7 iso free download.

anoop4realanoop4real
5,2593 gold badges35 silver badges45 bronze badges

In swift 3.x we can use loadHTMLString(_ string: String, baseURL: URL?)function which is used for displaying script in UIWebview

Note:- We can set height of UIWebView as i mentioned above in webViewDidFinishLoad method

Uiwebview Local Html Javascript Files

JackJack
7,5453 gold badges43 silver badges69 bronze badges

Uiwebview Local Html Javascript File Download

Not the answer you're looking for? Browse other questions tagged javascriptxcodeiosresourcesmathjax or ask your own question.