iOS에서 local html 파일을로드 할 때 표시되지 않아 빠졌기 때문에 메모
하고 싶은 일
어떤 화면의 배경에서 애니메이션을 재생하고 싶습니다.
애니메이션 네이티브 구현이 번거롭고, iOS, Android 공통으로 표시하고 싶었으므로, html 파일을 webview로 표시시키는 방법을 선택했습니다.
완성 이미지
webview 이미지로서는 이런 느낌.
이번에 빠진 일
할 수 있는 html 파일은 chrome등에서는 표시되는데, iOS에서는 로드하면 표시되지 않았습니다.
결론부터 말하면 HTML 측의 path의 문제였습니다.
xcode로 가져온 경우 폴더 구성이 다르게 보입니다.
가져온 html 소스의 폴더
html, js의 폴더 구성은 이런 느낌.
문제의 html 파일 경로
bubble.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/common.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bubble.css" media="all">
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/bubble.js"></script>
</head>
<body>
<div class="field"></div>
</body>
</html>
폴더 구성적으로
href="css/common.css" 디렉토리에서는 다르다고 하고, 경로의 변경이 필요합니다.이하, 패스의 변경판
bubble.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./common.css" media="all">
<link rel="stylesheet" type="text/css" href="./bubble.css" media="all">
<script type="text/javascript" src="./jquery.1.11.1.js"></script>
<script type="text/javascript" src="./bubble.js"></script>
</head>
<body>
<div class="field"></div>
</body>
</html>
veiwcontroller 구현
로컬 파일이므로 wkwebview에는하지 않습니다.
``viewcontroller
class ViewController: UIViewController {
let bubblePath = Bundle.main.path(forResource: "bubble", ofType: "html")
var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = UIWebView(frame: self.view.frame)
self.view.addSubview(webView)
// Do any additional setup after loading the view, typically from a nib.
let request = URL(fileURLWithPath: bubblePath!)
let req = URLRequest(url: request)
webView.loadRequest(req)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
``
이제 잘 표시됩니다 ( ❛⃘ ∨ ❜⃘⃘ )੭⁂
Reference
이 문제에 관하여(iOS에서 local html 파일을로드 할 때 표시되지 않아 빠졌기 때문에 메모), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fujiwarawataru/items/8e636da6b43cfac39c6e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
