<script type="text/javascript">
function printDoc() {
document.getElementById("frame_singleCheque").contentWindow.print();
}
</script>
<iframe style ="height:400px; width: 750px; overflow:scroll;" id="frame_singleCheque" src="http://www.w3schools.com"></iframe>
<input type="button" id = "btnCPrint" value = "Print" onclick="javascript:printDoc()" />
Error
[16:41:44.054] Error: Permission denied to access property 'print' # http://localhost/pdf/print.php:3
i have verified with lot of stack suggested threads for print iframe content. but for me those are not worked.
Exactly above code only present in my print.php file. i want to print the iframe content.
Also i want to know, how to print the specific div which is present inside the iframe. example in this iframe " class = 'example_code notranslate' " .
You can print a cross-domain iframe page perfectly by nesting the cross domain iframe in a locally hosted iframe. A "proxy iframe".
This way the parent javascript can print the proxy iframe without issue since it's local, which will transitively print it's inner iframe originating from another domain.
This technique works and has been verified by myself.
In your container page, host the iframe like this
<iframe id="printf" name="printf" class="A4" src="/SomeController/IFrameProxy?url=TARGETURL"></iframe>
The proxy iframe should look like something like this
#model string
<html>
<head>
<title>IFrame Proxy</title>
<style>
html, body, iframe {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-style: none;
}
</style>
</head>
<body>
<iframe src="#Model" seamless></iframe>
</body>
</html>
The javascript that prints the iframe (defined on container page) should look something like this:
function printFrame() {
var frm = document.getElementById("printf").contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
}
It look like you've got a pretty standard cross-domain iframe issue here - namely that browsers are designed so you can't do this. There's a lot of fudges I could suggest, but largely, iframes are the wrong solution to this problem.
Basically, your best bet is to scrape the page - make a http request and parse out the content you want. Then you can interact with it as part of your own page's DOM.
How do I print an IFrame from javascript in Safari/Chrome
Print iFrame Content (#5)
Print contents of IFRAME from parent window
Related
I've got some simple html like below, and I need to access the SVG object in a JS script, and I'm having a horrible time of it.
<!DOCTYPE html>
<html>
<head>
<script src="../dist/svg-pan-zoom.js"></script>
</head>
<body>
<h1>Demo for svg-pan-zoom: SVG in HTML 'object' element</h1>
<object id="demo-tiger" type="image/svg+xml" data="tiger.svg" style="width: 500px; height: 500px; border:1px solid black; ">Your browser does not support SVG</object>
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function.
window.onload = function() {
svgPanZoom('#demo-tiger', {
zoomEnabled: true,
controlIconsEnabled: true
});
};
</script>
</body>
</html>
Once this page loads, there is a new document with an svg tag within the object. I can select the object tag with document.querySelector("#demo-tiger"), that seems to work fine, but absoultely cannot get to the svg within it. i've tried contentDocument and getSVGDocument() and everything else i could think of. They all turn up null.
Any guidance would be greatly appriciated.
Unfortunately, this will not work if you load it locally through file://. This is because the contentDocument attribute is only accessible when both frames (main/top and the loaded one) are SameOrigin and the rules for file: uri's are stricter than normal urls for security reasons. You can find more information on this here: What is the Same-Origin Policy for File URIs?
When I am using curl in order to retrieve a html page, I face with the following message:
Please turn JavaScript on and reload the page.
I am not sure how to handle this, hence I can open the same page on my web-browser.
[Q] How could I fix this in order retrieve html-page's information only using terminal?
$ curl http://bsod.pw/
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("recaptcha-form").submit();
}
</script>
</head>
<body>
<div id="recaptcha-loading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 30001; opacity: 0.8;">
<p style="position: absolute; color: White; top: 30%; left: 40%;">
<img src="https://250410.selcdn.ru/antiddos/lg.rotating-balls-spinner.gif">
</p>
</div>
<center><noscript><h1 style="text-align:center;color:red;"><strong>Please turn JavaScript on and reload the page.</strong></h1></noscript>
<form id='recaptcha-form' action="/captcha" method="POST">
<button id='submitbutton' style="visibility:hidden;" class="g-recaptcha" data-badge=bottomright data-sitekey="6LcigjgUAAAAACyu9edrmWKmIce8h0kIFQz7iyRo" data-callback='onSubmit'></button>
<script>
window.onload = function(){
document.getElementById('submitbutton').click();
}
</script>
<br/>
</form>
</center>
</body>
</html>
If you do inspect element on the site(http://bsod.pw/) you can see that more detailed html code.
Thank you for your valuable time and help.
There is no "error". You make a GET request using curl. It returns you some HTML. The HTML happens to contain mostly links to JavaScript code that your browser is supposed to load and to execute. Your browser (with JS activated) could load the .js scripts and run them. Those scripts would generate some neat web page. If you don't load the linked scripts, and do not execute them, then you don't get much out of the page. Consider using a proper headless browser instead (see example below).
Here is a small example that is supposed to demonstrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Source code empty, page full!</title>
</head>
<body>
<div id="fillThis">
<p>Almost nothing there in the source code!</p>
<p>... but inspect this div after JS is executed.</p>
</div>
<script>
var fillThis = document.getElementById("fillThis");
for (i = 0; i<1000; i++) {
var child = document.createElement('p');
child.innerHTML = "tons of content " + i;
fillThis.appendChild(child);
}
</script>
</body>
</html>
Just save this as "something.html", and open it in the browser. When you ask you browser to show page source, this is exactly what you will get. However, when you inspect the div by right-clicking on it, it will show a that it has >1000 child elements appended to it. Those are generated by JS in your browser, they do not come from the server in form of HTML.
Edit
I tried to access the page using PhantomJS, it almost worked. Here is what I did:
#!/bin/bash
cat <<HereDoc > /tmp/phantomjsScript.js
var page = require('webpage').create();
page.open('http://example.com', function(status) {
if(status === "success") {
console.log(page.frameContent);
}
phantom.exit();
});
HereDoc
phantomjs /tmp/phantomjsScript.js
This is a bash script that generates a helper script in /tmp, which is then executed by phantomjs. PhantomJS loads the website, and also executes the JavaScript. Unfortunately, the website that you've linked to is protected by a captcha-mechanism, and is not directly accessible, so the above example uses example.com instead. If you can somehow work around the captcha, you probably can use a similar script to load the HTML, run the JS, and then dump the rendered DOM to the console.
Try running the code on chrome. Actually the error is due to captcha connection and the error says "Cannot contact reCAPTCHA. Check your connection and try again."
EDIT:
I found out that the problem has to do with not having access to the elements inside an iframe without a specific API or something like that. It has been solved.
I need to embed the image of the Astronomy Picture of the Day website. Here is the html that I have now:
<head>
<style>
body, html {
margin: 0px;
padding: 0px;
}
iframe {
border: none;
}
</style>
</head>
<body>
<iframe id="iframe" width="100%" height="600px"
src="https://apod.nasa.gov/apod/astropix.html"></iframe>
<div id="PlaceToPutTable"></div>
<script src="panel.js"></script>
</body>
Here is the JavaScript that I have now:
var iframe = document.getElementById("iframe");
var div = document.getElementById("PlaceToPutTable");
div.innerHTML =
iframe.contentWindow.document.getElementsByTagName("a")[1];
I have tried using iframe.contentWindow.document.getElementByTagName("img")[0] with and without .innerHTML following it.
I am using this as an Opera Sidebar Extension, so I keep getting this error when adding .innerHTML: Uncaught type error: cannot read property 'innerHTML' of undifined.
I got this code by manipulating the code I got at this answer, but the Astronomy Picture of the Day image does not include an id.
The undefined property indicates that a variable has not been assigned
a value.
You are not getting anything from there.
I would suggest you to debug a bit your code. First of all it seems like this is not getting anything iframe.contentWindow.document.getElementsByTagName("a")[1] so you should first debug it to see if it contains the element you are looking for.
So you should debug with a console log and see what this gets:
console.log(iframe.contentWindow.document.getElementsByTagName("img"));
Hope this helps you out.
I have say 6 aspx pages that I want to display within something like an Iframe so that when I look at the page I can see an array of controls that contain a web page.
But if I use an Iframe I cannot then size the content to the size of the Iframe although YouTube does resize the content so their must be a way to do so.
So, how would I go about making sure that the content fits the IFrame or is there a better way of doing this.
Also, ultimately I would like to go to the page if the control was clicked but I am not sure that the Iframe has a click event.
So, how would I go about doing that ?
If the contents of the iframe are on the same URL as the main page then you shouldn't have any security issues and you can add JavaScript to the content pages to pass the height of their content back to the main page. Same with click events: you can have some JavaScript call a function on the parent page.
Here's an example of a main and iframe content page. The content page has a button you can click that will resize the iframe based on the height of the content.
main.htm
<html>
<head>
<script type="text/javascript">
function resize1(h) {
document.getElementById("iframe1").height = h + 50;
}
</script>
</head>
<body>
<div>Test</div>
<iframe id="iframe1" border="1" height="100" src="iframe.htm" width="200">
</body>
iframe.htm
<html>
<body>
Resize iframe
<div id="content" style="background:Red;height:500;width:50px;">
Test content
</div>
</body>
You could adapt this to suit your needs. For example, the height could be set as soon as the iframe content loads by calling the function in the onload event of the iframe content page.
Note that any JavaScript functions you want to call on the main page must be in the HEAD section.
I have this simple html page I wish it to scroll automatically to bottom the iframe however the codesimply does not work, it does not scroll down the iframe automatically,
anyone knows whats wrong with it?
<html>
<head>
<script type="text/javascript">
function showLog() {
el = document.getElementById("log")
el.innerHTML='<iframe id="myLogFrame" name="mylog" onload="this.contentWindow.document.documentElement.scrollTop=100" src="http://yahoo.com" width="100%" height="50%" align="middle" scrolling="yes" frameborder="0"></iframe>'
el.scrollTop=el.scrollHeight
}
</script>
</head>
<body onload="showLog()"/>
test1
<div id="log" style="width:100%">
</div></body></html>
Sadly, what you're trying to do is impossible due to the Same Origin Policy which restricts any and all access to documents that are not on your domain.
Your only chance is if the remote page has an anchor to the bottom of the page. If it does, you can link to that anchor. The browser will jump there.
<iframe src="http://yahoo.com#name_of_bottom_anchor">
If your iframe is linked to another domain, web browser will blobk you access iframe's document, so you can access iframes scrollTop.