I am building a messaging web application where I want to add a functionality to capture and upload the screenshot of any of the opened windows selected by the user.
Complete Use case: On the web app instead of uploading an image user will click a button (called capture) which will enable the user to take a screen capture of any of the selected window. This is similar to screenshot/screen clipping in outlook or office products. We need this functionality to be embedded in the web app running on the browser.
Example: A user is using my web app and wants to share a painting art s/he made using the paint application, s/he clicks on the 'capture' button and select the paint window which is opened and take a screenshot of that paint window and upload that image in the web app.
Is there any javascript library which can help me perform this action?
It is different from this question (Using HTML5/Canvas/JavaScript to take in-browser screenshots) as I am looking for the screenshot on different window rather than on the browser window.
Thank you.
It is not possible to capture screenshot, or do anything at all, outside of the DOM content in one tab/window.
Refer https://en.wikipedia.org/wiki/Same-origin_policy
A web page can only access its own contents. Not other web pages. Not things outside the window.
If you're looking for some tool to capture screenshots of any window and any web page, it should be a native application of that OS (windows app, android app, etc) and should use the tools/api's provided by that OS. That cannot be integrated directly into a web page.
The closest option is to let the user take a screenshot using whatever tool necessary and upload/paste that image onto your web page.
Related
Edge/Chrome allows "install website as an app", which allow launch website in separate window as standalone application, with its own icon, be able to pin to taskbar/start menu, basically creating a web app.
Is there a way detect when website is viewed in such "app"?
Why I need this, is because these windows display both title you gave when created the app (which by default is the website's title) and title of the website, more ofthen than not, it will show double title. So, I'd like automatically change title on website when it's viewed in the app.
I've tried research and people suggested use navigator.standalone or matchMedia('(display-mode: standalone)').matches but I think it's for websites opened in a webView of nodejs or such (?), both method return false
I would like to know if it is possible to capture content of outside of web browser when open web page.
So for example, when use enter some website, web server can capture content of outside of web browser?
If it's possible, how can I do that?
Thank you
I'm currently working on an application that uses the Phonegap/Cordova framework to display an online and an offline version of a website. If you're not familiar w/ this framework, it offers a simple way of creating multi-platform applications by displaying local files in a full-screen webview.
When launching the application, the Javascript integrated in the local files of the application detects if Internet access if available, and redirects the user to either another local webpage containing a full-screen iFrame of the live website, or a reduced offline version of the website (contained in the local files of the app) if no Internet connection is detected.
I would like to detect when the user logs in using the various forms on the website (being displayed inside the iFrame), but I have no way of knowing which page the user is on, or interact w/ the website content at all because of the same-origin policy.
Would it be possible though to make the Javascript from the local page (which contains the iFrame) interact w/ the Javascript from the remote page (which is being displayed in the iFrame)? This way, I would be able to obtain the login information, and save it for later use (obviously not w/o using a token system), but also it would help for another planned feature (trigger the guidance system).
Thank you.
Look into HTML5 communication, it's pretty simple and sounds like it fits your needs
http://stevehanov.ca/blog/index.php?id=109
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
We are creating an office add in where on button click we are posting data to new web page but expecting page should open in same browser window.
Currently it is not possible as add in pane is inside iframe and has sandbox attribute applied to it. is there any setting present though which we can add "allow-top-navigation" value in sandbox attribute?
There are two possible interpretations of what you're asking:
Navigate the add-in page itself to a new location (eg. the page within the task pane), on any platform like Office Online, on the Windows Desktop, iPad, etc.
Navigate the parent Office page itself to a new location, when the add-in is being used in Office Online in the browser
(1) is supported: use a normal navigation API (like location.href) and ensure that your add-in manifest file includes the destination domain in the list of AppDomains.
(2) is not supported.
-Michael (PM for add-ins)
UPDATE: Found How can I get the current tab URL for chrome extension?
I require the tab.ID to refer to a tab of a specific URL. However not sure if this means me issuing the extension refresh itself constantly (or will the iframe the extension is contained within do this live)?
================
OP
I would like to develop a Chrome extension. At this stage of development what I need it to do is 'know' which website it is on. I'm not very experienced with JavaScript (I have some experience developing applications in Java and C, whereas Python is kind of my specialty language and I've deployed a lot of powerful tools using this).
I'm not sure how to go about getting live information of the website the user is currently viewing without constantly refreshing the iframe the application is contained in. I'm thinking of some kind of for loop to do this work for me but I'm also worried about the rate at which this refresh is going to take place (I don't want Chrome to start CPU hogging if many tabs are open).
The framework I'm looking to use during development looks like this (not sure if this is ideal but this is what I have in mind)...
FOR [EXTENSION IFRAME]
{
Extension page IS Extension_OFFLINE (indicating tab is not on, online_example_page)
Extension page IS Extension_ONLINE (indicating tab is on, online_example page).
}
Such that [EXTENSION IFRAME] actively detects what web-pages you are viewing. I would like to avoid refreshing the extension constantly to get this information if possible.
So what it'll look like is the logo and html page will change depending on whether or not you're connected to the online_example page which could be https://example.com.
If the user is on different tabs this is fine. I only need it to detect at least one instance of https://example.com (so ideally ranging over all tabs).
Thank you in advance if you're able to help!