How to print a html with entire iframe(s) content in it - javascript

I'm working on a printing function for a web mail client, currently as we need to show some additional mail infos, so display an email by embedding a iframe, iframe height is dynamic based on inner content height, when I click 'Print' menu of browser then the print preview dialog pops up, find that can not print entire iframe content. Anybody know why? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
iframe{
width: 100%;
border: 1px solid #ECECEC;
}
</style>
<script>
function loaded(evt) {
const frame = evt.target;
frame.height = frame.contentWindow.document.body.scrollHeight;
};
function reloadFrame(frame) {
frame.height = 'auto';
loaded({target: frame});
}
window.onresize = function() {
reloadFrame(frame1);
reloadFrame(frame2);
}
</script>
</head>
<body>
<div class="container">
<h2>additional info</h2>
<iframe id="frame1" src="child.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
<h2>additional info</h2>
<iframe id="frame2" src="child2.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
Here are some screenshots:
Html Page
Print Preview

Related

How to fill this iframe src with the value of this div?

I have this div tag on my page:
<div class="widget-content">https://www.somelink.com</div>
And also this iframe tag:
<iframe frameborder='0' height='100%' src='' width='100%'/>
Is it possible to fill iframe src with the "https://www.somelink.com" value from .widget-content?
This standalone web page, containing HTML, CSS and JS will do what you asked. In this case, we get Kodak's main page (only because they don't prevent framing their site--many others do).
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<style>
#myIframe {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="widget-content">https://www.kodak.com</div>
<iframe id="myIframe" frameborder='0' height='100%' src='' width='100%'/></iframe>
<script>
var doc = document
, myNewPage = doc.querySelector( 'div.widget-content' ).innerText
;
doc.getElementById( 'myIframe' ).src = myNewPage;
</script>
</body>
</html>

JavaScript style body outside iframe

How can the outermost body tag be styled using JavaScript from inside the innermost body tag of an iFrame?
<html>
<head>
</head>
<body>
<div id="ad_tag" style="width: 1px; height: 1px;">
<div id="ad_container" style="border: 0pt none;">
<iframe id="ad_iframe" title="title" name="name" scrolling="no" marginwidth="0" marginheight="0" style="border: 0px none; vertical-align: bottom;" srcdoc="" width="1" height="1" frameborder="0">
<html>
<head>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<script>
parent.document.body.style.background = "url('https://news.nationalgeographic.com/content/dam/news/photos/000/676/67655.jpg') no-repeat top center fixed #ffffff";
</script>
</body>
</html>
</iframe>
</div>
</div>
<div id="content">
</div>
</body>
</html>
In this specific case:
No direct editing of attributes or styling allowed, existing are preset.
Only child elements of the innermost body can be edited.
The goal is to deliver a background image using Google DFP.
The best way would be with a post message from the frame, that the parent (the site) will execute through listener.
So your iframe should contain some code like:
<script>
window.parent.postMessage({
'func': 'changeBackground',
'message': ''
}, "*");
</script>
And your parent (the site) should contain a listener like:
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
function changeBackground(message) {
$('div#backgroundwrapper').css({
'background-image': 'url("https:/example.com/example.jpg")',
$('div#backgroundwrapper').click();
var win = window.open( '%%CLICK_URL_ESC%%%%DEST_URL%%', '_blank');
win.focus();
});
}
</script>
In my example, it will put the image file as a background on a div with ID backgroundwrapper. My example uses jQuery to change the CSS and adding a clicktag, but it could be made without it as well.

refresh of page within the iframe for other page

First, I apologize for my English evil. I am using a translator.
I put a ' refresh ' the page to redirect it after 45 seconds. As I do for this page to load only within the iframe? Thanks
<html>
<head>
<title>My title</title>
<meta http-equiv="refresh" content="45;URL=http://otherpage.com.br">
</head>
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;" src="page2.html" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
Don't work.. :(
<html>
<head>
<title>My title</title>
<script>
setInterval(function(){
var url = 'http://stackoverflow.com/';
document.getElementsByTagName('iframe')[0].src = url; }, 45000);
</script>
</head>
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;" src="page2.html" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
Here you are:
JQuery:
setInterval(function(){
var url = 'http://stackoverflow.com/';
$('iframe').prop('src', url);
}, 45000);
Or Javascript:
setInterval(function(){
var url = 'http://stackoverflow.com/';
document.getElementsByTagName('iframe')[0].src = url;
}, 45000);
You have a problem of "X-Frame-Options' to 'SAMEORIGIN".
Now, What does it(X-Frame-Options' to 'SAMEORIGIN) mean?
Ans: It means that the site owner do not want anybody to open his/her site in iframe because for security point of view it is poor to have a site to be opened in iframe.
You can check out the link : How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?
Try this:
<html>
<head>
<title>My title</title>
<meta http-equiv="refresh" content="45;URL=http://otherpage.com.br">
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;"
src="index.html"
frameborder="0"
scrolling="no"></iframe>
</div>
<script>
setInterval(function()
{
console.log("here");
var elem=document.getElementsByTagName('iframe')[0];
elem.src=elem.getAttribute("src");
}, 45000);
</script>
</body>
</html>

Why are multiple HTML Object Objects not displaying?

I'm trying to get user-controlled display of content from 3rd party websites. In the demo setup, onmouseover of a link causes an object to be displayed, which then disappears onmouseout.
The demo works for one of the objects, and for all of them in turn if I delete the other objects, so I'm guessing the issue is about the objects interfering with each other.
I made a guess at z-index, but that didn't seem to work.
Here's the demo file:
<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}
</style>
</head>
<body>
Link 1 |
Link 2 |
Link 3
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" />
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" />
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" />
</body>
</html>
Thanks in advance.
I inspected it in firebug, and realized the other objects weren't being rendered at all. I made a guess that the object tag needed a closing </object>
Code fixed below:
<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}
</style>
</head>
<body>
Link 1 |
Link 2 |
Link 3
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" > </object>
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" /> </object>
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" /> </object>
</body>
</html>

Can Javascript toggle frameborders?

I'm trying to use JS to toggle a frame's frameborder attribute. Here is my test case:
<html>
<head>
<script type="text/javascript">
function off() {
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
alert ("before, frame f1 had frameBorder=" + f1.frameBorder);
f1.frameBorder = "0";
alert ("after, frame f1 has frameBorder=" + f1.frameBorder);
alert ("before, frame f2 had frameBorder=" + f2.frameBorder);
f2.frameBorder = "0";
alert ("after, frame f2 has frameBorder=" + f2.frameBorder);
}
</script>
</head>
<frameset cols="50%, 50%" name="fs">
<frame frameborder="1" src="http://bikeshed.com" id="f1" name="f1" />
<frame frameborder="1" src="http://bikeshed.com" id="f2" name="f2" />
</frameset>
</html>
I load this up in Firefox, open up Firebug, and type "off()" into the console. It runs my function, which reports that both frameborders had been set to "1" and are now set to "0" .. however, the frame border fails to disappear.
Is what I'm trying to do possible? If so, how?
Using iframes instead of frames seems to work. You'll have to work on the CSS a bit to complete the illusion of a frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Frame Test</title>
<script language="javascript">
var off = function () {
document.getElementById('frame1').style.borderWidth = 0;
alert('off');
}
</script>
</head>
<body style="margin: 0; padding: 0">
<table style="width: 100%; height: 100%" cols="2">
<tr>
<td><iframe id="frame1" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
<td><iframe id="frame2" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
</tr>
</table>
</body>
</html>
For some attributes, you need to use setAttribute. Try
f1.setAttribute('frameborder', 0);

Categories