Reputation: 2834

Display local HTML page in UIWebView

I want to show a local HTML file in my UIWebView. I can show it, but without any styles or images. Means relative paths are not working but I must use relative paths because there will be much more files. Here is my WebViewController:

class WebViewController: UIViewController {
    @IBOutlet weak var web1: UIWebView!

    var fileName : String!

    override func viewDidLoad() {
        if let file = self.fileName{
            print("got: "+file)
        }

        let url = NSBundle.mainBundle().URLForResource(self.fileName, withExtension:"html")
        let request = NSURLRequest(URL: url!)
        web1.loadRequest(request)

        //this does not work, webview gets blank (white)
//        let path: String? = NSBundle.mainBundle().pathForResource("AceVetBolus", ofType: "html", inDirectory: "HTMLFiles")
//        if let unwrappedPath = path {
//            let requestURL = NSURL(string: unwrappedPath)
//            let request = NSURLRequest(URL: requestURL!)
//            
//            web1.loadRequest(request)
//        }
    }
}

Here is my folder structure:

Here is my html:

<!DOCTYPE html>
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>

<link rel="stylesheet" type="text/css" href="./css/product.css" />

</head>
<body>

<h2> Ace-Vet Bolus</h2> 
<div class="title">Composition:</div>
<p> Each Bolus contains Paracetamol BP 2000 mg. </p> 

<div class="title">Indication:</div>
<img src="./images/chicken_icon.png"/>
<p>Recovery from fever, pain (headache, earache, body ache, neuralgia,
 pain due to intestinal inflammation, rheumatoid fever, post vaccination pain, 
 post delivery pain, post operative pain) and tissue swollen resulting from trauma,
 injury, burn or any other infectious diseases of both Animal  & Poultry.</p> 

<div class="title">Dosage and administration:</div>
<p>Animal:  1 bolus / 130-140 kg body weight (15 mg/kg body weight), 3 times daily.
Poultry: 1 bolus should be mixed with 10 litre drinking water & administered 2 - 3 times daily.
Or as directed by the registered Veterinary physician.</p> 

<div class="title">Contraindication:</div>
<p>Ace-Vet<sup>&reg;</sup> Bolus should be used with caution in those animals which are renally or hepatically impaired.</p> 

<div class="title">Use in pregnancy and lactation:</div>
<p>Ace-Vet<sup>&reg;</sup> Bolus is safe in all stages of pregnancy and lactation.</p> 

<div class="title">Side effects:</div>
<p>Side effects of Ace-Vet<sup>&reg;</sup> Bolus are significantly mild, 
though hematological reactions have been reported. Pancreatitis,
 skin rashes and other allergic reactions occur occasionally.</p> 

<div class="title">Storage:</div>
<p>Protected from light, store in a cool and dry place. Keep out of reach of children.</p> 

<div class="title">Pack Size:</div>
<p>10x4 Bolus.</p> 

</body>

</html>

Upvotes: 0

Answers (3)

Nimit Parekh

Reputation: 16864

You need not identify the folder ./css/,./images/ directly use file name i.e product.css and chicken_icon.png.

Just try following HTML.

<!DOCTYPE html>
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>

<link rel="stylesheet" type="text/css" href="product.css" />

</head>
<body>

<h2> Ace-Vet Bolus</h2> 
<div class="title">Composition:</div>
<p> Each Bolus contains Paracetamol BP 2000 mg. </p> 

<div class="title">Indication:</div>
<img src="chicken_icon.png"/>
<p>Recovery from fever, pain (headache, earache, body ache, neuralgia,
 pain due to intestinal inflammation, rheumatoid fever, post vaccination pain, 
 post delivery pain, post operative pain) and tissue swollen resulting from trauma,
 injury, burn or any other infectious diseases of both Animal  & Poultry.</p> 

<div class="title">Dosage and administration:</div>
<p>Animal:  1 bolus / 130-140 kg body weight (15 mg/kg body weight), 3 times daily.
Poultry: 1 bolus should be mixed with 10 litre drinking water & administered 2 - 3 times daily.
Or as directed by the registered Veterinary physician.</p> 

<div class="title">Contraindication:</div>
<p>Ace-Vet<sup>&reg;</sup> Bolus should be used with caution in those animals which are renally or hepatically impaired.</p> 

<div class="title">Use in pregnancy and lactation:</div>
<p>Ace-Vet<sup>&reg;</sup> Bolus is safe in all stages of pregnancy and lactation.</p> 

<div class="title">Side effects:</div>
<p>Side effects of Ace-Vet<sup>&reg;</sup> Bolus are significantly mild, 
though hematological reactions have been reported. Pancreatitis,
 skin rashes and other allergic reactions occur occasionally.</p> 

<div class="title">Storage:</div>
<p>Protected from light, store in a cool and dry place. Keep out of reach of children.</p> 

<div class="title">Pack Size:</div>
<p>10x4 Bolus.</p> 

</body>

</html>

EDITED

Remove HTML Root folder reference.
Drag your html folder into your project.
Follow image

Now use your code.

    override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
           if let file = self.fileName{
            print("got: "+file)
        }

        let url = NSBundle.mainBundle().URLForResource(self.fileName, withExtension:"html")
        let request = NSURLRequest(URL: url!)
        web1.loadRequest(request)
}

Upvotes: 1

Leonardo

Reputation: 1750

your problem is that on the app's bundle, there are no folders image or css, you just copied the files, without the folder structure

Try this:

Click on HTML Files group and press delete, select Remove references
Go to the Finder folder HTML Files and drag the entire folder to
the project, select Create folde references
A blue folder should appear on your project
If you check your target under Build Phases>Copy Bundle Resources, you'll see that the entire folder structure is now added to your bundle

Upvotes: 2

ios developer

Reputation: 198

  @IBOutlet weak var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        //load a file
        var testHTML = NSBundle.mainBundle().pathForResource("privacy", ofType: "html")
        var contents = NSString(contentsOfFile: testHTML!, encoding: NSUTF8StringEncoding, error: nil)
    var baseUrl = NSURL(fileURLWithPath: testHTML!) //for load css file

        webView.loadHTMLString(contents, baseURL: baseUrl)

    }

Upvotes: 0

Display local HTML page in UIWebView

Answers (3)

Related Questions