I have an iframe in my webpage where I can load websites dynamically. Is there any way to capture only the iframe and save it as an image? If not possible, is it possible to take an screenshot of the whole page using JavaScript?
Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...
For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.
You should try url2png
Or use html canvas to do this
Look at the html2canvas project. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element.
It is also really easy to use. Here is an example:
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
You can adapt it to your code relatively easy.
Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.
To be able to use html2canvas in your iframe you may need to inject it in and then execute it from inside iframe context. The following may help you to achieve this:
inject a javascript function into an Iframe
Related
I am generating some tabular content using ng-repeat in AngularJS, and I would like to have this content display in an iframe, so that the user can drag it and resize it.
I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.
I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.
How can I construct my iframe such that the ng-repeat generated content is displayed within?
You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
document.getElementById("frame").contentWindow.document.getElementById("mydiv")
The srcdoc property can be used instead of src to indicate you will be providing code for the contents. Seamless is also expected when you use srcdoc; it tells the browser that the iframe's contents are supposed to be treated as a part of the website, rather than a nested one. Unfortunately, this will trigger styling changes that eliminate the whole reason you wanted the iframe in the first place (the resize handles disappear). Furthermore, you'd have to inject css files and javascript files into the iframe - it's not worth it.
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
Here's a fiddle I was using to test out controlling iframe contents. It's very basic but accurately demonstrates how much trouble they actually are: Fiddle
I'm sorry if this wasn't the right place to ask. I'm having trouble figuring this one out.
What I'm trying to do is removing the demo bar provided by marketplaces like themeforest or mojothemes within my own demo site.
But since what appears in the marketplace's live demo of a theme is fetched, it appears within an iframe inside of their site.
I've tried asking in their forums but no one has been helpful.
Is there any way to do about this? An example done in a marketplace would be great.
The Answer is No. It is not possible to modify dome elements outside iframe by a script on site in iframe.
Reason: Since The Marketplace website is Accessing your Demo Site within iFrame at thier server.
Like how you embed a YouTube Video on your Page and Specify a Heading above it etc, does youtube or google map ever try to change their container styles? do they ever change the heading you wrote above the embed code?
Thats it
You cannot (due to the Cross Site Scripting - http://en.wikipedia.org/wiki/Cross-site_scripting) as it is a separated document. But what You can do is to use Web Messenging: http://en.wikipedia.org/wiki/Web_Messaging to affect JS/CSS within the iframe (but this will require actions on both sides).
If you can execute Javascript from within an iframe you can change the elements outside of it with the Window parent Property. Example usage:
parent.document.body.style.backgroundColor = "red";
changes the background of the <body> outside of the iframe.
Is it possible to capture the rendered HTML page from Javascript.
I want to be able to create a "minimap" of an HTML page for quick navigation.
have a look at html2canvas
It does some good things, even if it's not perfect
You can use:
document.body.innerHTML
That is the whole "rendered" (ie. live/DOM-complete) HTML, but I'm not sure this is what you want.
You would be better defining what it is you want to create a map of, for example headings etc, then you can use getElementsByTagName('h1') (for example) to grab all of the H1's on the page.
If you're talking an actual image as rendered by a browser, you can take a look at wkhtmltopdf and it's wkhtmltoimage counterpart, which will take HTML (or a web address) as an input and convert it either to a text-complete PDF, or a static image. Have used this neat app before on large projects so it's definitely reliable, also uses WebKit so CSS3/JS compatible.
wkhtmltoimage is only of use for static html pages.
If you have user selections or a canvas with some drawing (other than the default when first rendered) wkhtmltoimage will not help.
I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live
I have pdf embedded in html, pdf embedded object has internal controls & so on. But they are smnall. I need make them bigger. I.e. external.
Now have a problem, - how to make page up/[age down, with external buttons/links? I try send up/down to holder DIV - but with no effect. Is this ever possible to do ?
I hear that somehow is possible make an images from PDF, but i need this at UNIX hosting, and this will be not an PDF.
Pls help me
Please read about PDF Open Parameters. I think you might be able to manipulate embedded PDF with that parameters.
Another approach is to create a set of images from your PDFs using some PDF library.
And another approach is to use Google Docs PDF Viewer.
You can create the scroll plugin to make up/down. however you can create the master DIV with static width and height and overflow hidden, and then make the child div inside this. Then with your external buttons, when you click to down, you must be decrease the top of the child DIV. and then you got it. have good time.