Question

我想在UIWebView中显示本地HTML文件。我可以展示它，但没有任何风格或图像。意味着相对路径不起作用，但我必须使用相对路径，因为会有更多的文件。这是我的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)
//        }
    }
}

这是我的文件夹结构：

这是我的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>

Answer 1

您的问题是，在应用的捆绑包中，没有文件夹image或css，您只是复制了文件，没有文件夹结构

试试这个：

点击HTML Files群组并按删除，然后选择Remove references
转到Finder文件夹HTML Files并将整个文件夹拖到
在项目中，选择Create folde references
项目中应出现一个蓝色文件夹
如果您在Build Phases＆gt; Copy Bundle Resources下查看目标，则会看到整个文件夹结构现已添加到您的包中

Answer 2

您无需识别文件夹./css/，./images/直接使用文件名，即product.css和chicken_icon.png。

试试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

删除HTML根文件夹引用。
将html文件夹拖到项目中。
关注图片

现在使用您的代码。

    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)
}

Answer 3

  @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)

    }

在UIWebView中显示本地HTML页面

3 个答案: