I have managed to display html in a UIWebView, but my problem is that the images are not displaying in my HTML, although my images, css, and javascript are all located in the same project folder.
Here is the my HTML:
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no, width = 320"/>
<link rel="stylesheet" type="text/css" href="site.css">
<script src="site.js" type="text/javascript" />
</head>
<body style="margin:0;padding:0;">
<div class="player"></div>
<div class="controller">
<div class="search"></div>
</div>
</body>
</html>
Here is my CSS:
body{
padding:0;
margin:0;
}
div.player{
width:320px;
height:180px;
}
div.controller{
float:left;
width:320px;
}
div.search{
float:left;
height:40px;
width:320px;
background-image:url('search.jpg');
}
And, finally, my Objective-C:
-(void)viewDidLoad {
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
[navigatorWindow loadHTMLString:htmlString baseURL:baseURL];
NSLog(#"%#",htmlString);
[super viewDidLoad];
}
Any idea what's going on here?
Make sure that search.jpg is adding to the Xcode Project. I believe that's the problem, because it is a local html file and not hosted on a server. Hope this helps.
background-image:url('search.jpg'); you have to give the full path of image here
Related
I'm using the below code to get the html value after the web view loaded and able to get the response in string
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame
{
WebDataSource *source = [frame dataSource];
NSData *data = [source data];
NSString *str = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
NSLog(#"String ::: %#",str);
}
Here's my html response in str :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="hidden" hidden="true">
<span id="u-email">something#gmail.com</span>
</div>
</body>
</html>
I would need to get the hidden value of span :
for ex :
<span id="u-email">something#gmail.com</span>
How to get the span value(something#gmail.com) in Webview of cocoa framework ?
Please advice!
you can try stringByEvaluatingJavaScriptFromString
e.g.
NSString *function = [NSString stringWithFormat:#"document.getElementById('u-email').innerHTML"];
NSString *result = [webView stringByEvaluatingJavaScriptFromString:function];
I am a newbi in JW and can't seem to implement to simplest player. Help me, please.
I have created an html and put it in my project. in the same place with the jwplayer.flash.swf, jwplayer.html5.js, jwplayer.js
My html file looks like this (Home.html):
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="myKey"</script>
</head>
<body>
<div id='player_8955'></div>
<script type='text/javascript'>
jwplayer('player_8955').setup({
file: "http://www.youtube.com/watch?v=ac7KhViaVqc",
width: "480",
height: "270",
image: "http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg",
});
</script>
</body>
</html>
in the controller class:
- (void)viewDidLoad
{
[super viewDidLoad];
htmlPlayerWebView=[[UIWebView alloc]initWithFrame:CGRectMake(20, 51, 674,381)];
[self.view addSubview:htmlPlayerWebView];
}
-(void)loadVideo
{
NSString *path = [[NSBundle mainBundle] pathForResource:#"Home" ofType:#"html"];
NSString *HTMLString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[htmlPlayerWebView loadHTMLString:HTMLString baseURL:[NSURL URLWithString:path]];
}
The functions are called. But nothing happens.
You actually can access local files from within the HTML of a UIWebview. Just change your code as such:
-(void)loadVideo
{
NSString *basePath = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:basePath];
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:#"Home" ofType:#"html"];
NSString *HTMLString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
[htmlPlayerWebView loadHTMLString:HTMLString baseURL:baseURL];
}
Any relative paths in your HTML will then be referenced from your project files.
I found the problem:
UIWebView doesn't have access to project files. So the jwplayer.js is not loaded.
So either load the player to some web server, or replace
<script type="text/javascript" src="jwplayer.js"></script>
with
<script type="text/javascript">
Content of the file jwplayer.js (right click on jwplayer.js -> view source -> copy -> paste to here)
</script>
In the years since this question was originally posted, JWPlayer has implemented a mobile SDK for iOS, which was at first freely available, and now is maintained exclusively for Enterprise users. There is also a new "Developer Class" account which gives full access for 6 months, free.
This post, and related issues, are perhaps the main motivator for such a move; exchanging the slippery moving target of web views, with their opaque implementation details, in favor of the controlled native environment available to a framework project was a clear win.
I want to create a couple of CSS to manage the orientation of embedded video player in UIWebView. And these CSS shall work to resize the player according to the device's orientation.
How can I create and add a CSS in my iphone application to execute the following code with my iPhone/iPad?
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
EDIT:
Following is the code that I have done for embedded video.(*youTubePlayer is an instance of UIWebView.)
NSString* embedHTML = #"<html><head><style=\"margin:0\" link rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait.css\">"
"<link rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape.css\">"
"</style></head>"
"<body embed id=\"yt\" src=\"%#\"type=\"application/x-shockwave-flash\"></embed>"
"</body></html>";
NSString* html = [NSString stringWithFormat:embedHTML, url];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[youTubePlayer loadHTMLString:html baseURL:baseURL];
And also have added landscape.css
body
{
width: 1002;
height: 768;
}
portrait.css
body
{
width: 768;
height: 1024;
}
Even though it's not working properly. What is wrong with the code, please let me know.
Finally I have reached to my destination and sort out the problem by the following code. It's working perfect with youtube videos and also setting orientation of UIWebview. The benefit of the following code is, it won't re-start the video on the change of orientation of device.
NSString* embedHTML = #"<html><head><link rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait-ipad.css\"><link rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape-ipad.css\"></head><body><iframe type=\"text/html\" src=\"http://www.youtube.com/embed/%#\" frameborder=\"0\"></iframe></body></html>";
NSString *videoID = [url stringByReplacingOccurrencesOfString:#"http://www.youtube.com/watch?v=" withString:#""];
videoID = [videoID stringByReplacingOccurrencesOfString:#"&feature=youtube_gdata" withString:#""];
html = [NSString stringWithFormat:embedHTML, videoID];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[youTubePlayer loadHTMLString:html baseURL:baseURL];
(youTubePlayer is an instance of UIWebView.)
are you just missing px after your widths and heights? eg portrait.css body { width: 768px; height: 1024px; } instead of portrait.css body { width: 768; height: 1024; }
Here is the code I am using:
NSString *imagePath = [[NSBundle mainBundle] resourcePath];
imagePath = [imagePath stringByReplacingOccurrencesOfString:#"/" withString:#"//"];
imagePath = [imagePath stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
NSString *HTMLData = #"<meta name=\"viewport\" content=\"width=320\"/> <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\">";
[self.webView loadHTMLString:HTMLData baseURL:[NSURL URLWithString: [NSString stringWithFormat:#"file:/%#//",imagePath]]];
[self.webView setScalesPageToFit:YES];
There is a white border surrounding the image in the web view. Is there any way to just have the image take up the screen?
Edit: Added screenshot
Thanks in advance for your help.
Try adding a body tag that has its CSS margin property set to 0px. The generated HTML should look like this:
<meta name="viewport" content="width=320"/>
<body style="margin:0px;">
...img tag goes here...
</body>
Have your tried adding border="0"
Change: <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\">
To: <img src=\"image.png\" alt=\"\" width=\"320\" height=\"480\ border=\"0\">
in my iPhone application I'm loading the driving directions to a WebView from a bundled html page (because i can't find a way to load it directly to the MapKit), but it taking too much time to load, is there any better way to do so? Like in the iPhone default map application
code :
NSString *filePathString = [[NSBundle mainBundle] pathForResource:#"drive_index" ofType:#"html"];
NSMutableString *html = [[NSMutableString alloc] initWithContentsOfFile: filePathString];
[html replaceOccurrencesOfString: #"varLocation1" withString:loc1
options: NSLiteralSearch range: NSMakeRange(0, [html length])];
[html replaceOccurrencesOfString: #"varLocation2" withString:loc2
options: NSLiteralSearch range: NSMakeRange(0, [html length])];
NSURL *aURL = [NSURL fileURLWithPath:filePathString];
[webView loadHTMLString:html baseURL:aURL];
and the html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
var directionsPanel;
var directions;
var location1="varLocation1";
var location2="varLocation2";
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(location1), 13);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load('from: ' + location1 +' to: '+ location2 );
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:divice-width ; height:350px ; float:top; border: 1px solid black;"></div>
<div id="route" style="width:divice-width; border; 1px solid black;"></div>
</body>
</html>
Have a look at this answer:
Showing Driving Directions in MapKit
It says a way to use the Map Kit (which doesn't include driving directions) and overlay lines directly on top. Here's the site they reference:
http://spitzkoff.com/craig/?p=65
You should definitely see if you can switch to V3 of the Google Maps API. It was specifically designed to load quickly on mobile browsers. The only problem (and it's a big one) is that it doesn't support directions yet.