iOS - Embedding Facebook video in UIWebView - javascript

In my app I have a UIWebView which shows content generated from WP (HTML code generated from Facebook embedding).
The content HTML is loaded with loadHMTLString:baseURL: method (where for base URL I use URL to mainBundle file path, because of a local CSS file). The videos I've tried and have problems with are set to Public visibility.
The problem I am facing is that when the content contains a Facebook embedded video, the video is not shown. Instead, in the place where it should be placed, there is a blank space.
I've had a similar problem showing an embedded post from Twitter, or Instangram (not the same kind of problem tho. Here, there was a post frame, but it was without a picture, or text). I have solved it by adding "http:" to the javascript file link. That solution doesn't work for facebook video problem.
Also, I've tried using WKWebView, without any luck. I have tried searching for a similar problem here, but I haven't found one.
Any help is appreciated.

where for base URL I use URL to mainBundle file path
HTML documents which include the Facebook Javascript SDK do not execute that SDK properly within a UIWebView, unless the baseURL parameter is set to an external website.
That is,
someUIWebView.loadHTMLString(HTMLString, baseURL: nil)
Will not work. But
someUIWebView.loadHTMLString(HTMLString, baseURL: URL(string: "https://google.com/"))
WILL work, even if your site has nothing to do with google.com.
It appears to me that the Facebook SDK isn't happy with a nil or local/file URL; it needs a genuine HTTP URL.

Related

UWP: webview does not display page using navigateToString method

I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.

How to load external url and save it on server with javascript

I want to load bing images pages "http://www.bing.com/images/search?q=home+design&qft=+filterui:imagesize-large&safe=off" , and save this url as html with javascript.
here is my code sample that I try :
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
but this code is send file to download on browser.
whether this may be done save url on server with javascript?
Suggestion and corrections are welcome.
One way to do this is with iframes, although it might not always be available for every site. But Bing seems to be ok with using iframes. I just tried adding the specific URL you listed into an iframe with the following HTML code and it worked:
<iframe src="http://www.bing.com/images/search?q=home+design&qft=+filterui:imagesize-large&safe=off"></iframe>
For other sites, such as Google, it might not be so easy. Google doesn't allow anything to be loaded in iframes by default, however it seems they will allow specific searches to be configured in your google account and display in iframes on sites you specify.
To achieve with Javascript (since the question mentions javascript) you can just leave the "src" attribute blank and set it using the script, for example if you only have one iframe on the page
document.getElementsByTagName('iframe')[0].src="http://www.bing.com/";

Is possible to read script tag src URL content using JavaScript/jQuery

Please guide me. Is possible to read script tag src URL content using JavaScript/jQuery. Please don't suggest JSON/Ajax/iframe options.
I have tried like
<script src="http://www.test.com" id="test">
document.getElementById('test').src
but it give only src URL.
My Exact requirements is,
I have two application, each in different web server with www.siteA.com and www.siteB.com.
In Server2, I have cross origin and iframe restriction to access the application. Example: If a request is coming from server1(siteA) to server2(siteB) via Ajax or iframe, it's restricted to access the siteB page content. But If I load siteB in script tag it's loaded, but I'm not able to get the content.
So I mentioned above, don't suggest iframe and Ajax. Help me to achieve this.
The best way really is AJAX, but it does sound like CORS is an issue for you. The only other option I can think of would be to open the page in a new browser window, although I don't know what kind of user experience implications that will have on your application.
You can open a new browser window by:
function showContent(){
var url = document.getElementById("test").src;
window.open(url, "_blank");
}
Although if you take this route, you shouldn't put the url on a script tag, because the browser will download it once (via the script tag), and then a second time on the window.open.

How to extract title, image from others' blog posts and publish on own site

I'm planning to build a site where I can share my handpicked curated contents and I couldn't wrap my head around the basic idea of getting those data fed into my site without going through API.
I first thought maybe I should inspect the source HTML of the page I want to embed on my site and access it with something like $('div.post').find('img').attr('src').
But I can't imagine myself doing that every time so I guess there must be a better way.
It's what Google+ does with their post. Once you add a url link, after a second it pulls featured image and some text snippet from the linked page.
Many sites use the Open graph protocol to get the meta-title, meta-description, image etc. for any url.
For example open: view-source:https://blog.kissmetrics.com/open-graph-meta-tags/ and search for "Open Graph Protocol Meta".
They are contained in the page source. You will have to send a request to the URL you want to crawl from, and read the appropriate meta tags through Regular Expr / HTML Parsers.
You can't make this with javascript. You need a server-side script that downloads the page you need and then parse it with a DOM parser.
With PHP you can get the content of one URL with cURL.
See more:
http://php.net/manual/es/book.curl.php

Embed external webpage inside html without iframe/ajax

I am working on Phonegap application and basically I want to embedd an external webpage inside my html page, yes for me various options are available. I tried with <iframe> method, but I am getting below error:
Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to 'DENY'
Since I don't have control over the server side, loading an webpage inside an iframe is ruled out.
I also tried with ajax method:
$.ajax({
crossOrigin: true,
url: 'https://xyz.com',
success: function(data) {
$( '#bodyFrame' ).html(data);
}
});
It works fine, but the biggest problem is it doesn't render CSS/Javascript, it only displays plain html.
I tried with <link rel="import" href="https://xyz.com"> now I am getting cross-domain issue.
My question is, is there a way to display an external website inside an HTML page with correct css and js rendering (I don't have control on this part on server side) without IFrame/embed/object tags? I searched lot of questions on SO, most of them tell to use ajax but this have css issue. Can anyone help me in this?
Well, I think that you have at least few options.
Do like I just did for my project where I need to be able to show whole pages offline: load the HTML for that page, iterate through it (with regular expressions) to find out all resource links (JS, CSS, images) and download those (store to file system). Once downloaded, change the URL to URI of your local file on initial HTML. After that show that HTML for user.
Few special things to mention about this way in no particular order:
Implement cache of your own to speed this up.
Use blacklisting for URLs that you don't want to download.
caolan's Async.js library is just great for this.
For CSS resources you need still to download images within it and change the links to those too.
Images can be converted just to Base64 representation inside HTML for less callbacks to handle.
This way you can use the iframes.
This is pretty much related to first one but go through the HTML on your success callback and get all the links for JS and CSS and use technique described here to reload those for you.
Here is summary of that method:
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);

Categories