Unlike with UIWebView and previous versions of WKWebView (iOS 10 & macOS 10.12), the default load operation for local files has moved from Bundle.main.path to Bundle.main.url. Similarly, loadFileURL has also become the default function to load local resources in WKWebView.
I know that .path and .url are entirely different and have both worked in the past – .path historically being the default-chosen method; however, it seems that the latest versions of Swift have broken most, if not all, .path solutions. The .path solutions seem to now flatten the directory hierarchy, putting all of the CSS, JS, and any other sub-directory contents, into one big directory. This causes loading errors when WKWebView attempts to load index.html, for example, with a linked, sub-folder stylesheet (ie. /css/style.css).
After seeing numerous questions and countless uncertain/broken answers to match, is there a quick and painless solution for implementing a WKWebView that can load local resources (including linked CSS/JS files), without any workarounds?
Updated for Swift 4, Xcode 9.3
This methods allows WKWebView to properly read your hierarchy of directories and sub-directories for linked CSS, JS and most other files. You do NOT need to change your HTML, CSS or JS code.
Solution (Quick)
Add the web folder to your project (File > Add Files to Project)
Copy items if needed
Create folder references *
Add to targets (that are applicable)
Add the following code to the viewDidLoad and personalize it to your needs:
let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)
Solution (In-Depth)
Step 1
Import the folder of local web files anywhere into your project. Make sure that you:
☑️ Copy items if needed
☑️ Create folder references (not "Create groups")
☑️ Add to targets
Step 2
Go to the View Controller with the WKWebView and add the following code to the viewDidLoad method:
let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)
index – the name of the file to load (without the .html extension)
website – the name of your web folder (index.html should be at the root of this directory)
Conclusion
The overall code should look something like this:
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
#IBOutlet weak var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView.uiDelegate = self
webView.navigationDelegate = self
let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)
}
}
If any of you have further questions about this method or the code, I'll do my best to answer!
This work For Me:
WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
wkwebView.navigationDelegate = self;
wkwebView.UIDelegate = self;
[wkwebView.configuration.preferences setValue:#"TRUE" forKey:#"allowFileAccessFromFileURLs"];
NSURL *url = [NSURL fileURLWithPath:YOURFILEPATH];
[wkwebView loadFileURL:url allowingReadAccessToURL:url.URLByDeletingLastPathComponent];
[self.view addSubview:wkwebView];
I was facing the same issue my condition was, I am downloading some
HTML content from the server and save it to the Document directory and
show it inside the application. The same controller uses the LIVE URL
also I have to put the condition with url scheme. Tested on iOS 13 Xcode 11
if Url.scheme == "file" as String {
wkWebView.loadFileURL(Url, allowingReadAccessTo: Url)
}
else {
let request = URLRequest.init(url: Url, cachePolicy:.reloadIgnoringLocalCacheData, timeoutInterval:60)
wkWebView.load(request)
}
it worked perfect for me
1, Open project setting and got to Build Phases tab, open Link Binary with Libraries. Add Webkit framework.
2, Add the html to your project (Copy items if needed)
3, add this to your code:
#IBOutlet weak var webView: WKWebView!
4, viewDidLoad
viewDidLoad
It is possible to use resources from you project and even shared libraries inside html code with WKWebView.
For instance, I show how to load pic.png from bundle that contains ResourceContainingBundleClassNamed class.
NSSTring * htmlCode = #"<img src='pic.png'>";
NSBundle * bundle = [NSBundle bundleForClass:[ResourceContainingBundleClassNamed class]];
NSURL * base = bundle.resourceURL;
WKWebView * represent = [WKWebView new];
[represent loadHtmlString: htmlCode baseURL: base];
The magic is in resourceURL bundle property. If you just get path for desired file, then convert it to URL - no success.
Related
I got a project that involves a few USDZ files for the augmented reality features embedded in the app. While this works great, and we're really happy with how it performs, the built-in share button of the QLPreviewController is something that we'd like to remove. Subclassing the object doesn't have any effect, and trying to hide the rightBarButtonItem with the controller returned in delegate method still shows the button when a file is selected. The implementation of USDZ + QLPreviewController we're using is pretty basic. Is there a way around this issue?
func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
return 1
}
func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
let url = Bundle.main.url(forResource: models[selectedObject], withExtension: "usdz")! controller.navigationItem.rirButtonItems = nil.
// <- no effect return url as QLPreviewItem
}
#IBAction func userDidSelectARExperience(_ sender: Any) {
let previewController = QLPreviewController()
previewController.dataSource = self
previewController.delegate = self
present(previewController, animated: true)
}
This is the official answer from Apple.
Use ARQuickLookPreviewItem instead of QLPreviewItem. And set its canonicalWebPageURL to a URL (can be any URL).
func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
guard let path = Bundle.main.path(forResource: "Experience", ofType: "usdz") else { fatalError("Couldn't find the supported input file.") }
let url = URL(fileURLWithPath: path)
if #available(iOS 13.0, *) {
let item = ARQuickLookPreviewItem(fileAt: url)
item.canonicalWebPageURL = URL(string: "http://www.google.com")
return item
} else { }
return url as QLPreviewItem
}
The version check is optional.
My approach is to add the QLPreviewController as an subview.
container is an UIView in storyboard.
let preview = QLPreviewController()
preview.dataSource = self
preview.view.frame = CGRect(origin: CGPoint(x: 0, y: -45), size: CGSize(width: container.frame.size.width, height: container.frame.size.height+45) )
container.addSubview(preview.view)
preview.didMove(toParent: self)
The y offset of the frame's origin and size may vary. This will ensure the AR QuickLook view to be the same size as the UIView, and hide the buttons (unfortunately, all of them) at the same time.
Instead of returning QLPreviewItem, use ARQuickLookPreviewItem which conforms to this protocol.
https://developer.apple.com/documentation/arkit/arquicklookpreviewitem
Then, assign a url that you would want to share (that will appear in share sheet) in canonicalWebPageURL property. By default, this property shares the file url (in this case, the USDZ file url). Doing so would not expose your file URL(s).
TLDR: I don't think you can.
I haven't seen any of the WWDC session even mention this and I can't seem to find any supporting developer documentation. I'm pretty sure the point of the ARKit QLPreviewController is so you don't have to do any actual coding on the AR side. I can see the appeal for this and for customisation in general, however, I'd suggest instead looking at some of the other ARKit projects that Apple has released and attempting to re-create those from the ground up as opposed to stripping this apart.
Please advise if this changes as I'd like to do something similar, especially within Safari.
I couldn't get to the share button at all to hide or disable it. Spent days to overcome this. I did rather unprofessional way of overcoming it. Subview QLPreviewController to a ViewController and subview a button or view on top of image view on top of share button and setting my company logo as image. It will be there all the time, even the top bar hides on full screen in AR mode. Not a clean solution. But works.
I have absolutely tried everything with this one. I've read every apple article and no where can I find how to disable the loading of CSS (Styling) in the legacy UIWebView or the new WKWebView. I don't mind what web view I use just as long as it can accomplish this.
I've tried WKPreferences() and WKWebViewConfiguration and both have no member userStyleSheetEnabled.
I've referred myself to this apple article https://developer.apple.com/documentation/webkit/webpreferences/1536396-userstylesheetenabled?
Does anyone know the answer and how to achieve this on Swift 4?
The WebView class you referenced is very old and has been deprecated. If you need to add a webview to your app, use WKWebView instead. This answer works with iOS >= 11 and macOS >= 10.13.
What you need is adding WKContentRuleList to your WKWebView's configuration. They are similar to Safari content blockers (i.e. ad-blockers) that you may already have installed on your phone:
// This should ideally be in a file but we're using string for convenience
let jsonRuleList = """
[{
"trigger": {
"url-filter": ".*",
"resource-type": ["style-sheet"]
},
"action": {
"type": "block"
}
}]
"""
// Compile the content-blocking list
WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "blockStyleSheet", encodedContentRuleList: jsonRuleList) { list, error in
guard error == nil else { print(error!.localizedDescription); return }
guard let list = list else { return }
// Add the stylesheet-blocker to your webview's configuration
let configuration = WKWebViewConfiguration()
configuration.userContentController.add(list)
// Adding the webview to the view. Nothing to see here
self.webView = WKWebView(frame: self.view.bounds, configuration: configuration)
self.view.addSubview(self.webView)
// Let's try Apple's website without CSS
let request = URLRequest(url: URL(string: "https://www.apple.com")!)
self.webView.load(request)
}
Result:
References
Customized Loading in WKWebView (WWDC video)
Creating Safari Content-Blocking Rules
I'm using tableview to display different pdfs locally. For example;
pdf1 -> "1.pdf"
pdf2 -> "2.pdf"
pdf3 -> "3.pdf"
In my first click, there is no problem but when I tap again it loads different pdf. Ex: I tap pdf2 but it loads pdf1.
Can you help me in this issue, I'm new to swift..
You can easily do it with ;
NSURLCache.sharedURLCache().removeAllCachedResponses()
NSURLCache.sharedURLCache().diskCapacity = 0
NSURLCache.sharedURLCache().memoryCapacity = 0
Also use like this;
let url = NSURL(string: "http://www.web.com")
let url_request = NSURLRequest(URL: url,
cachePolicy: NSURLRequestCachePolicy.ReloadIgnoringLocalAndRemoteCacheData,
timeoutInterval: 5.0)
let webView = UIWebView()
webView.loadRequest(url_request)
Thanks
I have this code but it doesn't show anything only a black frame.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
var filepath: NSString = NSBundle.mainBundle().pathForResource("Akbar_ipad", ofType: "mp4")
var fileURL: NSURL = NSURL(string: filepath)
let moviePlayerController = MPMoviePlayerController(contentURL: fileURL)
moviePlayerController.shouldAutoplay = true
moviePlayerController.movieSourceType = MPMovieSourceType.File
moviePlayerController.view.frame = CGRect(x: 200, y: 200, width: 500, height: 300)
self.view.addSubview(moviePlayerController.view)
moviePlayerController.prepareToPlay()
moviePlayerController.play()
...
Have you got any idea how can i solve my problem? I am going crazy!
Thanks for your time.
I have a similar problem: How to load MPMoviePlayerController contentUrl asynchronous when loading view?
But here some ideas for you:
Maybe the url is constructed incorrectly/not local. Try using: let fileURL = NSBundle.mainBundle().URLForResource("Akbar_ipad", withExtension: "mp4")
You might need a global variable to hold a reference to the movie player instance (as described in the documentation.
For your problem, you maybe forgot add your resources as "Bundle Resources"
Follow below step to add:
In the Project Navigator select your project root
Select "Build Phases" tab
In "Bundle Resources" section to click "+" to add your resources
After that I think you can use both URLForResource and pathForResource
In my app I want to let the user download and use fonts, but I don't know how to do this dynamically. I know we have to specify the fonts we want to use in the app's Info.plist file, but we can't add anything to that plist file programmatically. There is zynga's library but it is a subclass of UILabel.
Please help
Yes, it is possible:
/**
Downloads a `.ttf` file from an URL and creates an UIFont.
- Parameter url: The URL of the `.ttf` file.
- Precondition: The URL Session must be previously configured at ease.
*/
fileprivate func setFont(url: URL) {
// Download the font file in .ttf format.
dataTask = urlSession?.dataTask(with: url,
completionHandler: { [weak self] (data, response, error) in
guard error == nil,
let data = data,
(response as? HTTPURLResponse)?.statusCode == 200,
// Create a Font Descriptor from the raw data.
let ctFontDescriptor = CTFontManagerCreateFontDescriptorFromData(data as CFData) else {
// Error during the download of the .ttf file.
self?.error()
return
}
// Create CTFont from the Font Descriptor and convert it to UIFont.
let font: UIFont = CTFontCreateWithFontDescriptor(ctFontDescriptor, 0.0, nil) as UIFont
// Do whatever you want with the UIFont :)
self?.success(font: font)
})
dataTask?.resume()
}
With this code, you can download a .ttf file from the Internet (you could get the file from any other source) containing a font and use it as UIFont.
You could use CGFontCreateWithDataProvider() followed by CTFontCreateWithGraphicsFont(). Then you'd have a CTFont, which you can draw using Core Text.
As far as I know there's no way to get a UIFont from a custom font without either having the font in your app bundle and using the Info.plist method (i.e. not downloading it), or using private APIs.
It's actually possible to download and register a font during runtime, you need download the font to a local folder and then you can use CTFontManagerRegisterFontsForURL or CTFontManagerRegisterGraphicsFont to register it.
I found that CTFontManagerRegisterFontsForURL seems to load TTF with mutiple styles while using CGDataProvider with CTFontManagerRegisterGraphicsFont only loads one.
Remember that URL need to be an internal URL, not an http one.
var unmanagedError: Unmanaged<CFError>?
if CTFontManagerRegisterFontsForURL(url as CFURL, .process, &unmanagedErrorT) == true {
// SUCCESS CODE
} else {
// ERROR CODE
unmanagedError?.release()
}