How to do screenshot for frontend page with iframe? - javascript

I have made a screenshot function with Javascript for our page, when user click to send issues to us, it will automatically do screenshot of the page through "html2canvas", so we could see something in the snapshot about the issue.
Since we use Iframe to load third-party sites, "html2canvas" don't work to do screenshot inside the Iframe. I searched and found that this library does not support Iframe.
Then I found the "MediaDevices.getDisplayMedia()" screen capture API, I could use it to capture the page. Howerver, as the api could capture screen out of browser page, it needs user permission every time Javascript do screenshot.
I wonder if anyone know a tool or sdk that could screenshot the web page with iframe, without user operation. Thank you!

Related

Let the user navigate an external website (that refuses to be within iframe) from my website

I have this situation:
So I want let the user navigate, from within my website, an external website, and I want to analyze the DOM of that website because I need the information within it.
I am not doing nothing to illegal, but only for work :)
The external website is designed in a way to "break out" an iframe. I tried to sandboxing the iframe, but the response received by the website has the same origin header, so I can't.
I kindly ask if someone worked with those situations and has some tips.
Example: I have to implement something on html page, or I have to implement something on webserver...I don't know.
Thanks to all!!!

Blocking frames from displaying a site from another domain

I am currently creating a script for Greasemonkey for which i have to create an iframe and display a site from a different domain, but it is not loading.
So I tryd it on another site and it worked -
So my question: Is there a setting which controlls this behaviour?
If you need any more information please tell me

how i can check if there are a video in the page

I'm building my first chrome extension using JavaScript. It is required in it to identify the videos in the page a automatically. And then send the info. to web service. I'm not sure if saving the URL and the video tag will be a good idea to remember the video.What do you think? is it a good idea? and if it is OK, how i can identify the video tags which inside the page?
Console in google chrome will tell you if your loading things other than just the site.
Right click inspect page, then click console.

loading javascript and communication between iframes

I've developed some javascript code that renders an iframe on the page. Inside the frame, it loads various API's for social networking, such as facebook, twitter, linked in, etc. It's basically a tool for the website to allow users to sign in with their social network. I've also created a simple jQuery plugin that loads this iframe into a modal popup.
Here's the problem:
The main iframe is loaded on the site, but the developer also wants to use the jquery plugin on the same page. It works fine, but ALL of the javascript is being loaded a 2nd time. So basically it is a huge waste of resources, as every social networking api is being loaded twice. I was wondering if there was a way to track that the api's have already been loaded, and to stop loading them again. The 2 iframes are exactly identical.
I tried adding some properties to window.top, but this doesn't work because of cross domain limitations. The two iframes are of the same domain, but the main site is a different domain.
I was also wondering if an iframe can detect if the main window has loaded jquery, as that is being loaded again even when it's not necessary.
Any advice and suggestion would be appreciated,
Thanks!
You should not use an iframe for this. It sounds like you are creating a 'login pop-up' for users to login, say if they clicked 'comment' and were not already logged in. Just use a div, and float it absolutely above the rest of page.

How do I track Fancybox clicks in Google Analytics?

I have a page with 24 links that each open up a .html file in a modal window with Fancybox, and each .html file has a video embedded in it. How do I track to see who is opening which videos?
How google analytics works
You put a by Google provided javascript (the tracking code) on your page .
Everytime the page is loaded, the javascript is executed and a hit is recorded by Google.
How fancybox works
You can use fancybox in different ways but the default behaviour is that you feed it a link and it will open the content of this link inside an iframe
If you know how iframes work, you should know that they just load/display a page inside a page. But because they load an entire page, the by google provided javascript will also load.
Answer
So to finally answer your question...,
If you use fancybox by default (loading content inside an iframe) google analytics will already record the clicks on those pages.
If not you should check out the note below.
Note: This is how it works with the original Google Analytics tracking code. If you are using the new Asynchronous tracking you should really check out this page as it explains in detail how to hook custom events etc: http://code.google.com/intl/nl-NL/apis/analytics/docs/tracking/asyncUsageGuide.html

Categories

Resources