Printing contents within iframe from parent window - javascript

The issue is related to printing the content in the iframe from the normal HTML file.
I have created an HTML file where I am just including an Iframe and passing the src with the online sample PDF file URL(for testing purpose). But after the HTML file is loaded and I tried to print the page using Ctrl + P, the page is printed without the iframe file.
I don't want to add a button to the HTML which will print the content of the iframe. I want to print the iframe content directly from the parent window.
<!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>My Page</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe id="printf" name="printf" src="http://www.africau.edu/images/default/sample.pdf" width="100%" height="98%" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Any ideas on how to achieve this?
The result prints the outer page and not the content within the iframe.

Related

How I center my HTML iframe in Android webivew?

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.

CSS :hover is not clearing when navigating to a new tab

I am developing a WCAG compliant website and we implemented links that navigate to a new tab by following the pattern suggested on the WCAG website.
Below is a working example of the issue: (Both Google and IE)
http://www.w3.org/WAI/WCAG20/Techniques/working-examples/G201/new-window.html
If you hover over the link and then click, the new tab appears. When you click back on the original tab, the hover remains open until you click somewhere.
I am not sure if this is a bug or by design, but what would be an appropriate WCAG method of clearing it. Using Javascript might work, but I am not familiar with how to do the hooks.
I was thinking about a transition on the hover that after x seconds, it fades away. Would that be okay for WCAG compliance?
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Pop-Up Warning</title>
<style type="text/css">
body
{
margin-left:2em;
margin-right:2em;
}
:focus
{
outline: 0;
}
a.info
{
position:relative;
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}
a.info:hover, a.info:focus, a.info:active
{
z-index:25;
background-color:#ff0
}
a.info span
{
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
a.info:hover span, a.info:focus span, a.info:active span
{
display:block;
position:absolute;
top:1em; left:1em; width:12em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}
div.example
{
margin-left: 5em;
}
</style>
</head>
<body>
<h1>Pop-Up Warning</h1>
<p>
This is an example of an <a target="_blank" class="info" href="http://example.com/popup_advisory_technique.html"><strong>External link</strong><span>Opens a new window</span></a>
</p>
</body>
</html>
Based on the comments, the target="_blank" attribute will open the page in a new tab, and keep the states in current tab unchanged. You can remove the target="_blank", and open the page in current tab. Or you can use javascript to clear the focus state in the click callback
<a target="_blank" onclick="this.blur();">Hello<span>Open in new window</span></a>

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>

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 use a CSS class to style a div inside an iframe to be the parent window's width and hight?

I want my div to go fullscreen.
I have a structure similar to the following and my method works when my div is outside an iframe but I can't get rid of the iframe.
html
<html>
<body>
<iframe>
<div id="contentDiv">Content</div>
</iframe>
</body>
</html>
css
.Maximized{
position: absolute;
top: 0;
left: 0;
width:100% !important;
height:100% !important;
}
When a user fullscreens the browser my content div should go fullscreen as well.
In my fullscreen-on event I do the following
$('#contentDiv').addClass('Maximized');
However the div fills the iframe and not the main window.
Is it possible to make my div go full screen just by adding classes?
No, you'll need to make the iframe go full screen as well.
As far as the contents of the iframe are concerned the iframe is the window, so going full screen inside the iframe will only make it the size of the iframe. But if you resize the iframe to be full window, then its contents can be full as well, provided you have no border, padding or margins on your iframe.
Try this code:
<iframe width="100%" height="100%" >
<div id="contentDiv">Content</div>
</iframe>
An iframe needs a src. You can't directly access the CSS of your iframe through the parent window, but that shouldn't matter in your case. Your code should look more like:
<!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' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
iframe{
height:100%; width:100%;
}
</style>
</head>
<body>
<iframe src='content.html'></iframe>
</body>
</html>

Categories