hsleedevelop
hsleedevelop
hsleedevelop
  • 분류 전체보기 (22)
    • Develop (22)
      • CS (1)
      • iOS (7)
      • Swift (13)
      • SwiftUI (0)

최근 글

  • Xcode 14 빌드 속도 올리는 방법
    2023.01.29
    Xcode 14 빌드 속도 올리는 방법
  • 스토리보드, XIB Inspectable에 enum 연동하⋯
    2023.01.29
  • M1 ARM-64 Simulator 지원하지 않는 프레임워⋯
    2023.01.07
  • String에 HTML 링크 적용
    2023.01.07
  • Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법
    2022.11.13
    Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법

인기 글

  • [iOS][Swift] WiFi AP 목록 스캔 또는 장치⋯
    2022.08.28
  • Figma 자동 익스포트 for Xcode, Android⋯
    2022.08.28
    Figma 자동 익스포트 for Xcode, Android⋯
  • Failed to uninstall gitlab-runne⋯
    2022.09.16
    Failed to uninstall gitlab-runne⋯
  • iOS 메모리 사용량 파헤치기
    2022.09.11
  • Xcode 14 빌드 속도 올리는 방법
    2023.01.29
    Xcode 14 빌드 속도 올리는 방법

태그

  • architecturel
  • Xcode 정의
  • Xcode 14 빌드 속도 올리는 방법
  • SVG 다운로드
  • SwiftUI 상에서 HTML 출력과 Link
  • Xcode Definition
  • Xcode Build
  • Simulator
  • Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법
  • CSS 적용하는 방법
  • Xcode
  • Jump to definition
  • Kingfisher SVG
  • XIB Inspectable
  • KingFisher에서 SVG 이미지 다운로드하는 방법
  • Swift
  • Link
  • xcode 팁
  • Xcode 빌드
  • 스위프트
  • ios localization
  • SVG download
  • enum 연동하는 방법
  • xcode 꿀팁
  • 시뮬레이터
  • excldue
  • Xcode 베젤
  • Xcode Build 실행 시 명확하게 표시하는 방법
  • Xcode bezel
  • html

최근 댓글

전체 방문자
1,465
오늘
2
어제
2

티스토리

hELLO · Designed By 정상우.
hsleedevelop

hsleedevelop

Develop/Swift

SwiftUI 상에서 HTML 출력과 Link, CSS 적용하는 방법

2022. 11. 13. 12:52
반응형

Feature

  1. SwfitUI에서 HTML을 출력한다.
  2. HTML - 링크 클릭 시, 활성화된 링크를 가져오거나, 핸들러를 제공한다.
  3. HTML에 CSS를 적용한다.
import SwiftUI
import WebKit

///참고 - https://stackoverflow.com/a/59018581/3374327
struct SUIWebView: UIViewRepresentable {
    @ObservedObject var viewModel: SUIWebViewModel

    let url: URL?
    let html: String?
    let css: String?

    func makeUIView(context: UIViewRepresentableContext<SUIWebView>) -> WKWebView {
        
        var webView: WKWebView!
        if let url = url {
            let request = URLRequest(url: url, cachePolicy: .returnCacheDataElseLoad)
            webView = .init()
            webView.load(request)
        } else if let html = html {
            
            if let css = css {
                let source = """
                var style = document.createElement('style');
                style.innerHTML = '\(css)';
                document.head.appendChild(style);
                """
                
                let userScript = WKUserScript(source: source,
                                              injectionTime: .atDocumentEnd,
                                              forMainFrameOnly: true)
                
                let userContentController = WKUserContentController()
                userContentController.addUserScript(userScript)
                
                let configuration = WKWebViewConfiguration()
                configuration.userContentController = userContentController
                webView = .init(frame: .zero, configuration: configuration)
            } else {
                webView = .init()
            }
            webView.loadHTMLString(html, baseURL: nil)
        }
        
        webView.navigationDelegate = context.coordinator
        return webView
    }

    func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<SUIWebView>) {
        
    }
    
    final class Coordinator: NSObject, WKNavigationDelegate {
        private var viewModel: SUIWebViewModel

        init(_ viewModel: SUIWebViewModel) {
            self.viewModel = viewModel
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            //print("WebView: navigation finished")
            self.viewModel.didFinishLoading = true
        }
        
        func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
            if navigationAction.navigationType == WKNavigationType.linkActivated {
                if let url = navigationAction.request.mainDocumentURL {
                    self.viewModel.activedLinkURL = url
                    self.viewModel.navigateFunc?(url)
                }
                decisionHandler(.cancel)
                return
            }
            decisionHandler(.allow)
        }
    }

    func makeCoordinator() -> SUIWebView.Coordinator {
        Coordinator(viewModel)
    }
}

final class SUIWebViewModel: ObservableObject {
    @Published var activedLinkURL: URL?
    @Published var didFinishLoading: Bool = false
    var navigateFunc: ((URL) -> Void)?
}

 

private let css = "body { font-size: 2.4rem; font-weight: normal; font-stretch: normal; line-height: 1.21; letter-spacing: 0;text-align: left; color: #666666; }"

VStack {
	SUIWebView(viewModel: webViewModel, url: nil, html: term.termsDetailContents, css: css)
	if webViewModel.didFinishLoading {
    	let _ = logD("didFinishLoading")
    }
}
 
 

 

 

반응형

'Develop > Swift' 카테고리의 다른 글

String에 HTML 링크 적용  (0) 2023.01.07
KingFisher에서 SVG 이미지 다운로드하는 방법  (0) 2022.11.13
multi-line 문구 localizable.strings 적용 방법  (0) 2022.10.13
UserDefaults 모든 항목 출력, 경로, 리셋  (0) 2022.09.06
Advances in Collection View Layout  (0) 2022.09.04
    'Develop/Swift' 카테고리의 다른 글
    • String에 HTML 링크 적용
    • KingFisher에서 SVG 이미지 다운로드하는 방법
    • multi-line 문구 localizable.strings 적용 방법
    • UserDefaults 모든 항목 출력, 경로, 리셋
    css, CSS 적용하는 방법, html, Link, SwiftUI, SwiftUI 상에서 HTML 출력과 Link, 링크, 스타일시트
    hsleedevelop
    hsleedevelop
    iOS, Swift js, node js, react c, c++, .net ruby, sql
    댓글쓰기
    다음 글
    KingFisher에서 SVG 이미지 다운로드하는 방법
    이전 글
    multi-line 문구 localizable.strings 적용 방법

    티스토리툴바