I am using angularjs pdf viewer in my project it is working fine with Google Chrome but while using it with IE when I go full screen by using full screen button in PDF viewer and press escape button it closes the PDF viewer expected behavior is it should close full screen mode and not the viewer, this functionality is working fine with Google Chrome. Not sure how to control this behavior
Any help is highly appreciated.
Just FYI,
I am using IE 11.
The PDF file is being loaded from Server(Azure app service).
Server application is build in C#.net core
Here is my code
included in app.js
app.config(function(pdfjsViewerConfigProvider) {
pdfjsViewerConfigProvider.setWorkerSrc("/pdf.js-viewer/pdf.worker.js");
pdfjsViewerConfigProvider.setCmapDir("/pdf.js-viewer/cmaps");
pdfjsViewerConfigProvider.setImageDir("./pdf.js-viewer/images");
pdfjsViewerConfigProvider.disableWorker();
pdfjsViewerConfigProvider.setVerbosity("infos"); // "errors", "warnings" or "infos"
angular.lowercase = angular.$$lowercase;
});
included package
"angular-pdfjs-viewer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/angular-pdfjs-viewer/-/angular-pdfjs-viewer-2.0.1.tgz",
"integrity": "sha1-KnYVcp/UC9/01VVyY6aES4Mc=",
"requires": {
"bower": "^1.8.2"
}
}
this is how I have included it in my page
<pdfjs-viewer data="$ctrl.data"></pdfjs-viewer>
controller
$scope.data = null; // this is loaded async
$http.get("http://example.com/file.pdf", {
responseType: 'arraybuffer'
}).then(function (response) {
$scope.data = new Uint8Array(response.data);
});
Try to use F12 developer tools to check if there have some error in the F12 Console tab.
Based on the document, I have tested the angular-pdfjs-viewer demo, after downloading the package and installing the angular-pdfjs-viewer and related dependencies, it will show the following error in my IE11 browser:
AngularJS: disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.
I tried to add the following code at the end of app.js file:
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
After adding the above code, the error disappears.
Then, if I open the pdf in full screen mode by using the full screen button in PDF viewer, I could exit the full screen mode by clicking the ESC button. But, if I open the PDF in full screen mode using the F11 shortcut, I can't exist the full screen mode using the ESC key, it only exits by using the F11 shortcut. You could try to check it.
Besides, you could also try to clear the IE browser data (cache, cookie and so on) or resets the IE browser setting. Might be they can help to solve the problem.
Related
I use react, ionic, and firebase primarily for the app i have published in test flight.
When i am testing it on a simulator, a real device, and even the web browser locally, it all runs as expected. However, when I successfully published it to TestFlight and the app opens, it does not allow me to leave the first page (the login page).
I can click the buttons and the functions will trigger, however, firebase shows no sign of being reached when I look at the logs and I cannot navigate to any other page either (the sign up page or otherwise).
this is my capacitor.config.ts file:
import { CapacitorConfig } from "#capacitor/cli";
const config: CapacitorConfig = {
appId: "com.traineraid",
appName: "Traineraid",
webDir: "build",
bundledWebRuntime: false,
};
export default config;
I don't have any idea where else the problems might lie, so if any advice at all for where to look would be helpful.
You can use safari technology preview to debug and it should point you in the right direction.
How to detect whether react app page is running on browser or under Webview2
Hi,
I am working on a react app and I have to show some react page with some content hide if it is rendering in webview2 in a WPF application or full page with full content if it is running on web.
Do we some straight forward solution to find out so that I can put that check on react js side to show or hide the page content.
I was using below to give a difference but came to know web view2 is using edge only to render the content.
import { browserName, browserVersion } from "react-device-detect";
Any help much appreciated.
Thanks!
It's easy to detect WebView2 from javascript:
console.log(!!window.chrome.webview);
This will return true when running inside WebView2 (and false when running in browser).
Then you can simply set the style:
document.getElementById('myHiddenElement').style.display = "none";
Edit (from your comment):
What you're seeing is a Typescript error, because window.chrome is not standard javascript. You need to add a 'index.d.ts' file to your project with the following content:
declare global
{
interface Window
{
chrome: Chrome;
}
interface Chrome
{
webview: WebView2;
}
interface WebView2
{
}
}
export { };
Now Typescript should 'shut up'.
I wrote few logs in my angular js application using the code below. However I am unable to see it displayed either in the console or (chrome -> dev tools) browser console. Where can I see the logs displayed?
console.info(' Maintanence !! ');
console.info(' Next Event = '+ next.name);
use console.log('Maintanence !!');
I am using Ionic and Oauth.io to perform authentication. If I run ionic serve and include the outh.js file in my index everything works good from the browser.
But when I run ionic run ios or install the app in android, I get the following error when I press the auth button (the one that suppose to execute OAuth.popup
I do not know what to do, until now I have checked the following:
In config.xml I have access, allow-intent and allow-navigation full permisive
I have installed and re-installed the plugin ionic plugin add https://github.com/oauth-io/oauth-phonegap.git
I tried to run the native app without the inclusion of the oauth.js file and everything breaks.
Using current versions up to date.
I am new to Ionic, so I don't know how to debug the device-running app or simulator.
Could be similar to this post but not exactly .
Your advices will be appreciated.
I figure it out reading some posts. The OAuth initialization and references should be done after the device is ready, so it is best to put the initialize in this block:
$ionicPlatform.ready(function() {
// ...
if(typeof window.OAuth !== 'undefined'){
$rootScope.OAuth = window.OAuth;
$rootScope.OAuth.initialize('XXX');
}
else{
console.log("plugin not loaded, this is running in a browser");
$.getScript( "lib/oauth.js", function() {
$rootScope.OAuth = OAuth;
$rootScope.OAuth.initialize('XXX');
});
}
});
Now, if the plugin is loaded it initializes the window.OAuth object, else the app is running in browser, so I have to include the oauth.js file. Also I assigned the OAuth to the $rootScope for quick access.
Hope this helps anyone.
I am building an application using AngularJS whose homepage displays the user 5 videos. The user can then click on any one of them to start playback.
The browser is currently downloading ALL source video files for each html5 video element displayed in the page. This is happening on Chrome and FireFox, but not on IE 11.
Here is the code for the app
AngularJS app initialization
var app = angular.module("hdv", ['ngCookies', 'infinite-scroll']).config(function ($interpolateProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://*.vo.msecnd.net/**',
'https://*.domain.com/**'
]);
$interpolateProvider.startSymbol('[[[').endSymbol(']]]');
});
I use the $sceDelegateProvider to whitelist different origins, as the video source files are served via CDN's (whose domain names are obviously different than the uri of my page).
The html5 video elements are built using a customer directive:
app.directive("aVideo", function($http){
return {
template: '<video controls width="100%" ng-attr-poster=[[[post.creative.media.poster]]] ng-attr-preload="metadata" ng-src="[[[post.creative.media.uri]]]" ng-attr-type="[[[post.creative.media.contentType]]]"></video>',
scope:{
post: "=",
},
link: function(scope, element, attrs) {
$(element).find("video").on("play", function () {
$http.post('/post/' + scope.post.creative.cuid + '/views?_csrf=' + csrfToken)
.success(function(data){
})
.error(function(error){
});
});
},
}
});
Note that the video elements all have the preload=metadata attribute set, so downloading of the source file should not start.
As you can see above, the source file is taken from the scope object "[[[post.creative.media.uri]]]". Through debugging, I have come to realize that it is the resourceUrlWhitelist method the one that triggers the download. If I remove the whitelisting, then the video files are not downloaded anymore (but are also not displayed in the browser due to $sce insecure error). Also, if I set this uri using the $sce "resourceUrl" method on every "post" object, then the browser will download the entire file.
It seems that, whenever $sce is used to whitelist a domain or the origin of a file, the browser just downloads the entire file, without respective the fact that it is a source of a video element and thus the preload attribute should be honored.
I'd like to get input from the community on how to resolve this issue, as every time users download my homepage, their browsers are downloading about 500mb of video data that they do not need.
You should definitely use preload instead of ng-attr-preload.
Check whether the meta block is at the end of your file. If this is your case check this post on how to fix it: Why do webkit browsers need to download the entire html5 video (mp4) before playing?