I'm trying to get the content of iframe in a javascript alert but, the alert appears empty
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
iframe {height:200px; width:300px; border:1px solid #000}
</style>
<script>
var iframe = document.getElementById("myFrame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
function newDoc() {
alert (document.getElementById('myFrame').innerHTML) ;
}
</script>
<body>
<iframe src="http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com" id="myFrame">
</iframe><br>
</br>
<img src="http://www.giftworksconnect.com/wp-content/uploads/2012/10/download.png" width="100" onclick="newDoc(); return false;" style=" cursor: pointer;" border="0" id="adflink" />
</body>
</html>
any help would be appreciated
Regards
Edit:
I'm trying to get the contents of an IFRAME because I'm using Adf.ly
Api
"http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com"
But this api respond with a blank page with the shortend url I want to
use the shortened url directly in my site script
I guess your main (parent) page is on another domain. In this case your access to the iframe content is forbidden due to cross-domain restrictions.
If you don't have control over the inner page (api.adf.ly/api.php) you can't handle it on with the client-side code on your page.
replace Your below line
alert (document.getElementById('myFrame').innerHTML) ;
with the below
alert(document.getElementById('myFrame').src);
Think it will work for You.
Related
Here is the test page I have. On this page there is an iFrame with another page from my site embedded.
<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is not vulnerable to clickjacking.</p>
<iframe src="admin.html" width="500" height="500" id="iframe"></iframe>
</body>
</html>
Here is the JavaScript I am using. this code is in admin.html
<script type="text/javascript">
if(window.location != window.parent.location){
// is within an iframe
/* $("iframe").bind('load', function(){
$("iframe").contents().find("body").css('display', 'none');
$(this).hide();
}); */
}
else {
// not within an iframe
}
</script>
The goal here:
When you visit the ClickJacking test page, the html within the iframe should be set to display: none.
I do not want anyone to be able to see the admin page within the iframe.
As you can see, I have several commented out attempts. But no matter what I do, the admin.html is still visible.
Any help is appreciated!
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
</script>
</head>
<body>
<iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
</body>
</html>
I'm trying to make the file load a URL into <iframe>, but when it finishes loading the URL, it reloads because of the onload attribute. Is there another attribute I should use? Thanks in advance.
It's difficult to use an iframe on an online editor because of the sandbox environment but it'll behave normal under normal conditions. As a valid test, you can enter http://example.com it's whitelisted.
UPDATE
Added a PLUNKER since SO sandboxes iframes.
EDIT
I added another way to manipulate the iframe you might be interested in. Itonly involves HTML, no JS. Notice the anchor to example.com. Basically all you need to do is the following:
Add a name attribute to the iframe (I always have id and name the same)
On the anchor, you change the target attribute value to the value of the iframe's name value.
So in this demo the part inside {{{...}}} is the trick. The brackets are added for emphasis do not include them into the code to use.
<a href="http://example.com" {{{target="site"}}}>Example.com</a>
<iframe id="site" {{{name="site"}}} src="/" width="100%" height="100%" frameborder="0"></iframe>
function changeSrc(src) {
var iframe = document.getElementById('site');
iframe.src = src;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
overflow-y: auto;
}
<form id="form" onchange="changeSrc(url.value);">
<fieldset>
<legend>Enter URL</legend>
<input id="url">
</fieldset>
</form>
Example.com
<section>
<iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
</section>
try this
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
if(URL) document.getElementById('window').src = URL;
</script>
</head>
<body>
<iframe height="610px" width="1320" id="window">
</body>
</html>
the onload attribute you had on your iframe is fired when the iframe loads (and not when the page window loads), hence it setting the src again and then reloading the page into an endless loop.
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
</script>
</head>
<body>
<iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
</body>
</html>
We can accomplish this by using java's DOM changing methods.
To get the SRC of something, you can type
document.getElementById('window').src = URL;
This will acquire the SRC attribute of the elemnt with the ID '#window', and then change the attribute to whatever you set it to.
Just be sure that the user enters a string.
I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
I need to pass data from a web page to an iFrame hosted in that web page. I used window.postMessage. however the iFrame does not receive the event.
Here is my code snippet.
Parent page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test event listener</title>
</head>
<body>
<script type="text/javascript">
function SendMsgToIFrame() {
alert("In Parent window ");
var myiframe = document.getElementById('myIframe');
if (myiframe.contentDocument) {
myiframe.contentDocument.postMessage('Post Message from Parent', '*');
}
else if (myiframe.contentWindow) {
myiframe.contentWindow.postMessage('Post Message from Parent', '*');
}
</script>
<button type="button" onclick="SendMsgToIFrame()">Push to iframe</button>
<div id="iframeDiv">
<iframe id="myIframe" src="http://localhost:50000/Receiver.htm" width="500" height="200" frameborder=10>
</iframe>
</div>
</body>
</html>
Code snippet for Receiver.htm is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Got Text</title>
</head>
<body>
<script type="text/javascript">
window.attachEvent("onMessage", myhandler);
function myhandler(mobj) {
alert("I am in iFrame");
var message = mobj.data;
alert("data: " + message);
}
</script>
<input type="text" name="text1" id="text1" value="text here" />
</body>
</html>
I am running the parent page on Tomcat (localhost:8080). The iFrame is running on my HTTP server I built using the httplistener.
When I run the parent page and hit the button that generates the event, I do not get the alert "I am in iFrame". Looks like the iFrame is not receiving the event at all. What am I missing here?
Any help is very much appreciated. Thanks!
Your code has some strange parts. You're using attachEvent where it's better to use addEventListener and you should probably post to contentWindow, not document.
The problem with my code was this:
window.attachEvent("onMessage", myhandler)
onmessage should be all lower case.
Once I changed this line to the below, it worked.
window.attachEvent("onmessage", myhandler)
I posted the answer here: javascript cross domain iframe resize
And that link also has a link to sample working code on github.
How to send a PDF file directly to the printer using JavaScript?
I found two answers in a forum:
<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>
and
<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
<PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>
But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.
Is there any solution for this?
I think this Library of JavaScript might Help you:
It's called Print.js
First Include
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')
What I did was something like this, this will also show "Loading...." if PDF document is too large.
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
Print PDF with Message
</button>
However keep in mind that:
Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.
There are two steps you need to take.
First, you need to put the PDF in an iframe.
<iframe id="pdf" name="pdf" src="document.pdf"></iframe>
To print the iframe you can look at the answers here:
Javascript Print iframe contents only
If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:
<iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>
the loader can look like this:
function isLoaded()
{
var pdfFrame = window.frames["pdf"];
pdfFrame.focus();
pdfFrame.print();
}
This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).
I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.
This is actually a lot easier using a dataURI, because you can just call print on the returned window object.
// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);
// Open the window
const pdfWindow = window.open(dataUrl);
// Call print on it
pdfWindow.print();
This opens the pdf in a new tab and then pops the print dialog up.
Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.
In head of the main page:
<script type="text/javascript">
function printpdf()
{
myWindow=window.open("pdfwebpage.html");
myWindow.close; //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>
And in body of the main page:
Click to Print the PDF
Inside pdfwebpage.html:
<html>
<head>
</head>
<body onload="window.print()">
<embed src="pdfhere.pdf"/>
</body>
</html>
a function to house the print trigger...
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
an button to give the user access...
(an onClick on an a or button or input or whatever you wish)
<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...
<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>
More : http://www.fpdf.org/en/script/script36.php
<?php
$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];
if($browser_ver['browser'] == 'IE') {
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
html { height:100%; }
</style>
<script>
function printIt(id) {
var pdf = document.getElementById("samplePDF");
pdf.click();
pdf.setActive();
pdf.focus();
pdf.print();
}
</script>
</head>
<body style="margin:0; height:100%;">
<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>
</body>
</html>
<?php
} else {
?>
<HTML>
<script Language="javascript">
function printfile(id) {
window.frames[id].focus();
window.frames[id].print();
}
</script>
<BODY marginheight="0" marginwidth="0">
<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>
<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">
</BODY>
</HTML>
<?php
}
?>