So I'm working with WebKit's - WebView and WebFrame. I use a custom NSURLProtocol to retrieve the HTML for each request from a database. The problem arises from the fact that the links in the HTML are all relative, when they really ought to be absolute. For example, the page
foo/bar.html
May have a link in it that points to
foo/baz.html
The problem is that since the link is relative, the request ends up being for
/foo/foo/baz.html
So far, I've tried to work around this by comparing the two URLs and stripping off the common prefix - in this case 'foo/' - leaving me with foo/baz.html. This doesn't work for all possibilities, however, especially when there are multiple directories in the path. I do this in the "didStartProvisionalLoadForFrame:" method of my WebView's frameLoadDelegate.
Unfortunately, I do not have control over the HTML that I'm displaying, so modifying the links themselves is not an option.
Try being the main frame's resource load delegate, and implementing webView:resource:willSendRequest:redirectResponse:fromDataSource: to modify the URL being requested. Send relativeString to the request's URL to get the original relative URL, then use -[NSURL initWithString:baseURL:] to create a new URL with the same relative string against the correct base URL.
Related
In one control I try to display images using JavaScript. Everything is fine as long as I am in the URL controller
https://localhost:44300/Campaigns
But when I refer to the index, the images are not displayed, even though I am on the same page or after the Redirect ("Index").
https://localhost:44300/Campaigns/index
The root address does not seem to be working properly
This is my image address when it works properly in Campaigns
https://localhost:44300/uploads/f09ef469-0893-4089-8491-78707d097b0e.jpg
This is my image address when it does not work properly in Campaigns/Index
https://localhost:44300/Campaigns/uploads/f09ef469-0893-4089-8491-78707d097b0e.jpg
The CSS and js address images in the layout work well, and I used UseStaticFiles() in the Configure.
It is because you are referring to the images with a URL that is relative to your current page. You need to use a URL that is relative to your site root. You can change this by prefixing the URL with / where you are constructing them.
Eg instead of something like
uploads/f09ef469-0893-4089-8491-78707d097b0e.jpg
Use
/uploads/f09ef469-0893-4089-8491-78707d097b0e.jpg
I'm optimizing the loading times in a web app and I don't know what's the problem. Firebug's Net panel is showing time holes between requests.
Can someone explain me this chart?
The gap between the requests can have two reasons:
Time needed to parse the requested page
When you request a URL, the browser needs to parse the returned contents to check whether they contain URLs to other ressources like JavaScripts, CSS files, images, etc. Subsequently requested ressources need to be parsed, too. So e.g. CSS files can contain references to images. Though the contents of the CSS file first need to be parsed to get those URLs.
Dynamically requested ressources
Using JavaScript resources can be requested asynchronously. These requests can be triggered e.g. through AJAX or by dynamically inserting DOM nodes like <img src="xyz.png" alt=""> into the page.
I want to manage internal contextual link building in my articles, but somewhat in a well-managed and easier way. It is a pain to change all the link URLs in a text if we change a URL of a page which is linked to many pages in their content.
You shouldn't need to change them if you used the content picker to select the page you are linking to because it inserts a URL in the format {localLink:####} where ### is the id of the document the link is pointing to.
This is then parsed and replaced with the correct and current URL when the document is rendered, so it is always current and correct.
Lets say my blog is http://foo.tumblr.com.
All the post's images are stored in xx.media.tumblr... (for example: https://24.media.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg) (first 2 numbers can be skipped)
But i want the URL of the image be in the same domain of my blog, and looks something like this:
http://foo.tumblr.com/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg
(that doesn't exist)
Why i need that? I am creating a script, and it generates a canvas that detects if the image have transparency with a getImageData (all the .jpg are skipped), but since the subdomain is different, i get a cross-domain security error, and the canvas is tainted, avoiding the use of getImageData.
So.. how can i do that?
I think Tumblr API could be useful, but how?
Scrape your sitemap for all posts and get their images. You could use the API or just with Javascript in the browser console:
xmlin = prompt(); // view-source:biochemistri.es/sitemap1.xml
parser = new DOMParser();
xmlDoc=parser.parseFromString(xmlin,"text/xml");
xmlDoc.querySelectorAll('loc')[0].remove();
posts = xmlDoc.querySelectorAll('loc');
postlist = [];
for (i=0;i<posts.length;i++) {postlist.push(posts[i].innerHTML)};
...to generate an array containing all posts, which can be navigated through for photo posts (div.post.photo) and their URLs copied.
Then simply generate a new list of images with a for loop and newImg = document.createElement('img'), setting an origin attribute using newImg.setAttribute('origin') = myPhotoList[n] which can then be used to select an image programmatically:
document.querySelector("img[origin='"+{PhotoURL-HighRes}+"']"
(or {PhotoURL-1280}, {PhotoURL-500}, {PhotoURL-250} etc. Once retrieved over an XMLHttpRequest, you could simply switch the post in the DOM. The {PhotoURL-HighRes} in my example above wouldn't work, it'd be an attribute from the page I'm just indicating which part you'd want to get from the theme HTML.
As explained in this post, there is a variable which could be used as a more concise attribute than the full origin URL if you want to be a bit more specific with regular expressions.
This would effectively put all of your images onto your local URL, with URLs like foo.tumblr.com/images/tumblr_kzjlfiTnfe1qz4rgho1_250.jpg, and avoid cross-domain restrictions. I'm guessing it'd work only if you don't have a ton of posts as custom pages such as you'd be using to store images do have a restriction on their size (though I suppose you could make a second one).
Also might be sensible to include CSS to set display: none in case anyone stumbles upon the page by accident, and a redirect function to the homepage with window.onload or similar.
We have some generated pages whose URLs contain parameters, like http://example.com/page.do?param1=hello. These pages contain named anchors inside, <a name="here">like this</a>. And there are corresponding links that reference the named anchors, like this. Most folks today call these "skip links".
Clicking a skip link should result in the browser creating and following a URL that matches the original one, with the named anchor tacked on at the end: http://example.com/page.do?param1=hello#here
On Firefox and IE, this works fine. On Chrome, Safari and other WebKit-based browsers, the parameters are lost, leading to http://example.com/page.do?#here which is invalid for our site, and just causes a 404 error.
Interestingly, if you manually put the full link in the location bar and press Enter, it behaves properly.
I've googled around a while and seen a lot of discussion about WebKit having problems with skip links, but none of them match the situation here where it's losing parameters.
Is this loss of parameters a known bug? Has anyone seen a workaround?
I encountered the same issue. From what I can say this is related to the usage of a meta tag like this: <base href="http://example.com" />. Once it is set my links point to example.com#foo instead of example.com?foo=bar#foo.
Knowing that I found this question. So the anchor tag behavior is a known thing:
Is it recommended to use the <base> html tag?
Since I can't remove the base tag I'll try to handle this with JavaScript.