How I center my HTML iframe in Android webivew? - javascript

I have an iframe in my Android webview that I am loading like this:
String folderPath = "file:android_asset/";
String fileName = "index.html";
String file = folderPath + fileName;
webView.loadUrl(file);
The iframe is loaded via HTML and CSS files located in my android/assests folder. The HTML and CSS look like this. HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<link rel="stylesheet" type="text/css" href="default.css" />
<div class="abs-frame-container">
<iframe
id="my_frame"
src="my web page link"
scrolling="no"
allowtransparency="true"
style="border:none;overflow:hidden">
</iframe>
</div>
</body>
</html>
and my CSS
#my_frame {
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
width: 117%;
height: 100%;
}
#abs-frame-container{
top: 10%;
bottom: 0%;
position: relative;
}
The webpage in iframe shows fine in the webview. I want to center (vertical alignment) my iframe in the webview so that it aligns automatically based on the webview dimensions (height). Would appreciate a lot if someone could help me how this can be achieved?

You can call custom JavaScript on WebView directly from Java/Kotlin. It is explained in the official documentation.
You can then make JavaScript script that adds CSS styles to parts of loaded html page, and center your iframe that way.

Related

Import HTML file into another HTML

I'm trying to import HTML file into HTML.
I need something like this:
<div>
<iframe onload="iframe.document.head.appendChild(ifstyle)" name="log" src="Objects.html"></iframe>
<style>
iframe {
height: 300px;
position: absolute;
bottom: 5px;
width: 100%;
}
</style>
But <iframe> crushes all the code in the main HTML file and causes thousands of errors like:
Error: attribute points: Unexpected end of attribute. Expected number, "…5390592086273 0 ".
Also:
Blocked a frame with origin "null" from accessing a cross-origin frame at HTMLIFrameElement.onload
So I need to put HTML into another HTML and style it.
Use the element to link files from HTML, CSS, or javascript:
<html>
<head>...</head>
<body>
<link herf="blah.html">
</body>
</html>

iframe Placeholder Image

I'm trying to make an iframe that will display a static image, then load a webpage within the iframe when a user clicks on the placeholder image. It's for a virtual tour, so the image will display the instructions, then view the virtual tour (link) when clicked. I know how to change iframe links using buttons, but for this particular application a clickable image is preferred. I'm fairly inexperienced, so any help is much appreciated!
Just put the iframe in a div, and put the background on the div, then make the iframe transparent, but not its contents.
<!doctype html>
<html>
<head>
<style type="text/css">
.iframeframe { background-image: url("whatever.lol"); margin: 0; padding: 0; display: inline-block; }
iframe { width: 600px; height: 400px; }
</style>
</head>
<body>
<div class="iframeframe">
<iframe src="whatever.lol"></iframe>
</div>
</body>
</html>

IFrame height issues on iOS (mobile safari)

Example page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
The problem is, that height of 200px from the IFrames inline style is ignored on mobile safari:
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the height style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.: I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
It looks like this: How to get an IFrame to be responsive in iOS Safari?
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
Wishing you luck.
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
So we need to put a div wrapping the iframe, and handle the scroll event in it.
<style>
.demo-iframe-holder {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
</style>
<html>
<body>
<div class="demo-iframe-holder">
<iframe src="content.html" />
</div>
</body>
</html>
references:
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
PROBLEM:
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
SOLUTION:
This super simple little CSS hack did the trick:
<style>
.iframe-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
}
</style>
<div class="iframe-wrapper">
<iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.

Position iframe to be above a footer section. Simple

I would like an iframe to be above a footer section that has some content.
I am a real beginner at this, but I was able to scrap together some code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#footer {
position:absolute; left: 0;
top: expression(document.body.clientHeight-150);
right: 0;
height: 150px;
background: red;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: expression(document.body.clientHeight-150);
top: 0;
background: blue;
height: expression(document.body.clientHeight-150);
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" src="https://www.link.com" />
</div>
<div id="footer">
Test content
</div>
</body>
</html>
-The order is right, the iframe sits above, however the iframe itself is too small. I want there to be there is no scroll bar. The footer section doesn't show the background color or text. I've clearly made a mess of things.
-I also don't want the footer to be absolutely positioned, a user should scroll down a bit to see it.
-I am also curious to learn how to get rid of a scroll bar from an iframe even when the iframe is too small. Actually, it would be nice if there was a way to 'cut off' the bottom section of a source link and replace it with my footer.
oke first of - I would advise refraining from inline CSS and ID's it's 'better' practice to use a CSS file and link to it and rather using classes and for instance using footer tags for the footer etc. - But that's minor! don't worry about that, you can see on the fiddle bellow I took your example and put it into what I believe is what you wanted:
Edit: Updated jsFiddle -- http://jsfiddle.net/xuwd9/1/
I will add your code edited if need be :)

Can I force Facebook fb_edge_widget_with_comment to open facing left instead of right?

Take a look at this page: http://www.allyou.com/static/weekly-circulars/
When you click the Like button next to the Grocery Circular Roundup title, the Like widget opens up to the right, and therefore the close button gets cut off at the edge of the content well.
However, when a user shrinks their browser width, that same widget automatically opens out to the left, so that it will fit on the page.
Is there a way to force the widget to open out to the left even when the user's browser is very wide? I don't have the option of fixing this chopped-off Close button issue by removing the overflow:hidden from the content area, because that conflicts with other advertiser requirements.
Unfortunately you can't really get the popup/flyout to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but it's probably way more of a headache than it's really worth for something like this.
However, you can prevent the undesired cut off by moving the entire widget when when the button is clicked. Just add the following CSS:
.fb_iframe_widget iframe {
position:absolute;
right:0px;
background:#fff; /* in your case you may want to add a white background */
transition: all .5s; /* completely optional, but adding a transition makes for a nice effect */
}
Actually you can't apply any additional styles to iframes from another domains (like Facebook in your case).
But you can try to add some CSS code to restyle width of this iframe by default:
iframe { width: 310px; }
Please try to apply it, I think this should fix this problem. I guess that Facebook' plugin content automatically will adapt its width to the width of iframe.
Cant move it properly but can reduce the width without cropping. This is one of those forgetten JavaScript gems that hardly get used. Im not sure if the ids are dynamic and constantly change but:
//grab the iframe
iframe = $('#f2576b984')[0]
//...the gem "contentWindow", which takes the iframe as a window element
if_as_window = iframe.contentWindow
//document element can go straight to this step by equaling it to iframe.contentWindow.document
if_as_document = if_as_window.document
//use jquery to find the div and change width
$(if_as_document).find('#u_0_6').width(300)
It works on your example page but like i said IDs might change so it might be case of using $.eq() ... if the pages are consistent.
Idea: Place the like button into an iFrame, position the like button on the right side of the iFrame and give the iFrame a width and height equal to the width and height of the flyout or a little more. This way you can "tell" Facebook that the page ends at the right of the like button and Facebook will display the flyout on the left side accordingly.
Caveat: You will not be able to receive click events on any element below the iFrame. So you will need to manipulate the z-index of the iframe using mouse over and mouse out events on the like button. This means, that the method does not work on mobile devices. But since you have a dedicated mobile site (which covers tablets as well), this solution might work for you. Update: I don't have a complete solution for this problem yet.
Working example (try both like buttons and the anchor):
parent.html
<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
iframe {
z-index: -1;
}
.top-layer {
z-index: 1;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="wrapper" style="position: relative; overflow: hidden; width: 600px; height: 800px; margin: 0 auto; z-index: 0; background-color: yellow;">
<a onclick='window.alert("click");' style="position: absolute; left: 200px; top: 100px;">click me</a>
<fb:like style="position: absolute; left: 360px;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
<iframe style="position: absolute; width: 600px; left: -160px; height: 600px; top: 50px;" src="child.html" frameborder="0"></iframe>
</div>
</body>
</html>
child.html
<!doctype html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like onmouseover="$(parent.document).find('iframe').addClass('top-layer');" onmouseout="$(parent.document).find('iframe').removeClass('top-layer');" style="position: absolute; right: 0;" href="http://www.allyou.com/static/weekly-circulars/" send="false" layout="button_count" width="140" show_faces="false" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
</body>
</html>
Try adding this style to your page:
<style>
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
left: -300px !important;
}
</style>
I managed to achieve this with the script-integrated like button (the "HTML5" rather than "IFRAME" implementation) — however this was some time ago (over 2 years) so I'm not sure if their markup has changed since. This method relies on the Facebook markup being injected directly into your page for CSS control. The code I used was as follows:
/* Facebook Like integration */
.facebook-like {
height: 24px;
margin: 8px 12px 0;
width: 47px;
}
.facebook-like .decoration {
display: none;
}
div.fb-like > span:first-child iframe.fb_ltr {
width: 47px !important;
}
.fb_edge_comment_widget {
margin: 10px 0 0 -346px;
}
.fb_edge_comment_widget span {
overflow: hidden;
position: relative;
width: 393px;
}
.fb_edge_comment_widget iframe {
margin: -10px 0 0;
}
One of the problems this incurred was losing the little triangle at the top of the box pointing back to the like button. I recreated it as follows:
.fb_edge_comment_widget::after {
background: url(data:image/gif;base64,R0lGODlhCQAGAJECAP///zMzM////wAAACH5BAEAAAIALAAAAAAJAAYAAAIOlI8XaQGLHHhq2iXtDAUAOw%3D%3D) no-repeat;
content: '';
display: block;
height: 6px;
position: absolute;
right: 30px;
top: -5px;
width: 9px;
z-index: 99999;
}
…However this was commented out in the code, with a little note explaining that the share dialogue wouldn't appear if the site was served in plain HTTP and the user had configured Facebook to force HTTPS — at which point the triangle would ruin the look. Now I believe Facebook forces HTTPS regardless, so I'm not sure if the technique works. Worth a shot though, I suppose!

Categories