iOS-HTML交互學習筆記(三)-拼接標題和圖片放入webView中

在添加完body信息后,現(xiàn)在我們把標題和圖片放入webView,

override func viewDidLoad() {
    super.viewDidLoad()
    
    // http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html
    // 1.設置url
    let url = NSURL(string: "http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html");
    // 2.設置請求
    let request = NSURLRequest(URL: url!);
    
    // 3.開啟異步請求操作
    let dataTask = NSURLSession.sharedSession().dataTaskWithRequest(request) { (data, response, error) in
        if (error == nil){
            // 轉(zhuǎn)為json數(shù)據(jù),try? 解決throws異常, as!強制轉(zhuǎn)換
            let jsonData = try? NSJSONSerialization.JSONObjectWithData(data!, options: NSJSONReadingOptions.AllowFragments) as! NSDictionary;
            self.dealNewsDetail(jsonData!);
        }
    }
    // 4.開啟請求
    dataTask.resume();
   
}

 // 處理拿到的數(shù)據(jù)并顯示
func dealNewsDetail(jsonData: NSDictionary) -> Void {
    // 1.取出所有內(nèi)容
    let allData = jsonData["BSB33M1000234KO7"];
    
    // 2.取出body中的內(nèi)容
    var bodyHtml = allData!["body"] as! String;
    
    // 3.取出標題
    let title = allData!["title"] as! String;
    
    // 4.取出發(fā)布時間
    let ptime = allData!["ptime"] as! String;
    
    // 5.取出來源
    let source = allData!["source"] as! String;
    
    // 6.取出所有圖片對象
    let img = allData!["img"] as! [[String: AnyObject]];
    
    // 7.遍歷
    for i in 0..<img.count {
        // 7.1取出單獨的圖片對象
        let imgItem = img[i];
        
        // 7.2取出站位標簽
        let ref = imgItem["ref"] as! String;
        
        // 7.3取出圖片標題
        let imgTitle = imgItem["alt"] as! String;
        
        // 7.4取出src
        let src = imgItem["src"] as! String;
        let imgHtml = "<div><img src=\"\(src)\"><div>\(imgTitle)</div></div>"
        
        // 7.5替換body中的圖片占位符
        bodyHtml = bodyHtml.stringByReplacingOccurrencesOfString(ref, withString: imgHtml)
    }
    
    // 創(chuàng)建標題HTML標簽
    let titleHtml = "<div>\(title)</div>";
    
    // 創(chuàng)建子標題html標簽
    let subTitleHtml = "<div><span>\(ptime)</span><span>\(source)</span></div>"
    
    
    // 拼接HTML
    let html = "<html><head></head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)</body></html>"
    
    // 把對應的內(nèi)容顯示daowebView中
    webview.loadHTMLString(html, baseURL: nil);
    
}

運行模擬器,觀察效果,圖片和標題都已經(jīng)加入,但是圖片適配有些問題,請看下一章:iOS-HTML交互學習筆記(四)-添加全局的CSS樣式

運行效果.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 這是一個關于markdown編輯器的測試 這是一段題外話,markdown語法怎樣空行? 下面是嚴肅的測試時間 A...
    豆芽琪琪琪閱讀 170評論 0 0
  • 一字千金,我們大多以為只是個傳說,但是我有慘痛的教訓:2015年6月1號,陶瓷原料及裝備展在廣州舉行,我公司有參展...
    巖如yu閱讀 1,685評論 0 50
  • 雨又下得密了我不知道什么時候離開這個惦念的清貧的小鎮(zhèn) 這半年,我冒著南方的雨撐傘結(jié)了鯉魚鱗片一樣溫柔的繭
    驚蟄夕閱讀 356評論 10 13