I am trying to load html page in WKWebView which is linked to external javascript and css files. My web view shows me the html page but it does not seem like that its respecting css file values. Can anyone please suggest me as to what am I doing wrong here. Following my code to add html page in WKWebView:
override func viewDidLoad() {
super.viewDidLoad()
let path = NSBundle.mainBundle().pathForResource("index", ofType: "html");
let htmlString = String.stringWithContentsOfFile(path, encoding: NSUTF8StringEncoding, error: nil);
self.webView.loadHTMLString(htmlString, baseURL: NSURL.fileURLWithPath(NSBundle.mainBundle().bundlePath));
}
Also, here is the project structure where .css, .js and .html files re added.
Any help would be appreciated.
The problem is that the WKWebView renders page content inside a sandbox process that cannot access files in your application bundle. This effectively means that file:// URLs do not work.
I ended up including a small web server in my application to make it easier to serve content to the WKWebView.
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
Relative URL in css var on iOS gets related file where this var was determined, instead of where it used, so URL is wrong.
Example: if to determinate url var into index.html
:root {--theme-bg: url('../img/white_rose.jpg');}
and to use it in separately style.css - in all browsers URL will be relative to this style.css and full URL will be http://domain/assets/img/white_rose.jpg
but on iOS will be relative index.html so final URL will be http://domain/img/white_rose.jpg
Anyone had this? Is this possible to fix somehow?
I have this exact issue, code here: https://github.com/warlockuk/safarivarurl
It's Safari. It seems to process the fallback url relative to the HTML, not the CSS file that contained it.
If you take the fallback URL out of the var and just set it straight on the HTML everything is fine.
I am trying to download a online page and override css with my custom css. However I couldn't have success.
I did the following steps:
Download Html string from an online page
Added "<link rel="stylesheet" type="text/css" href="styles.css">" to the page Html head. This styles.css contains a custom font and anothers css rules.
Loaded this new Html string to WKWebView with webView.loadHTMLString(html, baseURL: Bundle.main.bundleURL)
Another option would be just download the page and override the css with a style tag between the head tag, however I need to add a custom #font-face from a font in my project resources.
Any ideas how can I accomplish this? If I set Bundle.main.bundleURL as my baseURL resources from the online page don't download. If I set nil as my baseURL I can't access my custom font...
I think you should use bundlePath instead of bundleURL like this.
let url = URL(fileURLWithPath: Bundle.main.bundlePath)
webView.loadHTMLString(html, baseURL: url)
I'm using an UIWebView for viewing .pdf, .txt, .xls, .ppt files. I used webView loadRequest method for viewing these files and its working fine. I need to view files such as .odp, .odt, .ods etc, but its showing only blank page in UIWebView. Is there any effective method for viewing these files using UIWebView or any direct method for doing the same?
Have you tried using the UIWebView method load, specifying the MIME type? For example for an .odt file:
webView.load(loadedData as Data, mimeType: "application/vnd.oasis.opendocument.text", textEncodingName: "utf-8", baseURL: NSURL() as URL)
If that does not work, then I'm afraid you'll have to write your own open office document loader...
WebODF libs integration with UIWebView: Integrated WebODF libs with UIWebView and it's working fine. Please find the below steps
1) Load index.html file from WebODF libs on UIWebView
2) Inject .odt file On webViewDidFinishLoad using below code snippet
let jsFunction = "createEditor(\"../default.odt\", \"Test\", 375, 667)"
webView.stringByEvaluatingJavaScript(from: jsFunction)
3) Successfully load the odt file.
More information : https://github.com/kogmbh/WebODF/issues/945
Xcode 9 has taken another step forward with vectors inside of iOS projects. It will apparently retain the source PDF so that images may be generated as needed with full quality.
I'm wondering if it's yet possible to access these images from the HTML inside of a UIWebView?
I can imagine three possible ways of doing this:
Some magic that you place within your HTML or CSS that iOS will recognize and replace. For example:
<img src={{Asset Name}}>
Knowing the naming scheme to get at the asset. For example:
<img src="some/path/asset~ipad#3x">
"Render" the image outside the UIWebView and pass it in.
Are any of these possible? Is there another way?
Given how far we've come with vectors, I'd hate to have to pre-render every image variation and package them outside the asset catalog if I don't have to.
Today i needed to render the UIImage from XCAsset's into an UIWebView.
My requirement was to prepare the appropriate HTML and load it into the UIWebView as follows
self.myWebView.loadHTMLString(html, baseURL: nil)
In order to load images from XCAsset's, first loaded the image into an UIImage, then convert it back to Base64 Encoding, then put the image into the <img> tag.
The code looks like following
let redClockImage = UIImage.init(named: "clock-red")!
let imageData:Data = UIImagePNGRepresentation(self)!
let base64String = imageData.base64EncodedString()
let html = """
//my html
<img src="data:image/png;base64, \(base64String)" />
//rest of my html
"""
//then i load this html into the webview
self.myWebView.loadHTMLString(html, baseURL: nil)
For Convenience i moved the UIImage -> Base64 String conversion into an extension.