I have created CEF base desktop application, where I want to show two tabs ( login, iframeView), clicking on iframeView tab should load the iframe and show the content accordingly.
I use https://github.com/angular-ui/ui-router library to route the page.
but the problem here is, whenever we click on the second tab which has iframe, iframe takes time to load the content, what I want is, it should show iframe content immediately as soon as user click on tab, if I remove iframe code and add any other tags, it show the content quickly,
we have set Cache-Control: public, max-age=21600 in response header of URL https://example.com to get content loaded from cache but still it takes a time to load the content.
I tried by adding below Iframe code in main DOM and then tried to copy the same Iframe when the user clicks on the second tab but still, it takes the time to load the content.
is there any way to load the iframe content quickly?
Why is iframe slow?
index.html
<!DOCTYPE html>
<html lang="en">
[...]
<body ng-app="name" ng-controller="mainController" ng-init="init()" ui-
view>
</body>
</html>
mainController
.controller('mainController', function ($scope, $state, session, [...]) {
$scope.tabClick = function () {
$state.go('iframeView');
});
};
})
EDIT: Route definitions
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('iframeView', {
url: '/iframeView',
template: '<frame-view layout flex></frame-view>'
})
})
HTML of iframe-view
<iframe id="myIframe" src="https://example.com" style="width500px;height:500px"></iframe>
Related
I have a website by mean-stack.
Normally, all my external references are listed in index.html
I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.
Does anyone know how to achieve this in the routing?
Edit 1: (see the full question here)
Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of history.js)
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
Then, if I try the following code, as Ben suggests:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
var newScript = document.createElement('script');
newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
document.head.appendChild(newScript);
console.log(window.location.href)
</script>
I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.
So appending the script is not exactly the same as a direct reference, does anyone know why?
I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.
But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.
First you should add
<base href="/" />
in your HTML file.
Then you should enable HTML5 Mode inside Angular application as follows.
$locationProvider.html5Mode(true);
By adding these two attributes you can get rid off the # path and this is the recommended way.
Following is a complete example.
var app = angular.module("app", ["ngRoute"]);
app.controller("MainController", function($scope){
});
//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<h1>Home</h1>',
reloadOnSearch: true
})
.when('/about', {
template: '<h1>About</h1>',
reloadOnSearch: true
}).otherwise({
redirectTo: '/'
});
// This will remove hash bang from the routes
$locationProvider.html5Mode(true);
}]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
<base href="/" />
</head>
<body>
<div>
Home
About
</div>
<div ng-app="app" ng-controller="MainController">
<ng-view></ng-view>
</div>
</body>
</html>
As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.
This is one way to do it:
if(window.location.href !== 'https://url.com/path/to/trouble/page'){
var newScript = document.createElement('script');
newScript.src = 'https://url.com/path/to/script';
document.head.appendChild(newScript);
}
Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.
you can do lazy loading of script in angular
<script type="text/javascript" ng-src="{{exUrl1}}"></script>
and somewhere in your code (based on whatever logic you want)
$rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);
In my application, when we logged in I am passing an Http get request for an image. The image is being loaded successfully but it is not displayed until I refresh the page.
I want it to be displayed when I logged in by using angular in my application.
<img ng-src="{{ProfileImage}}" />
This is the HTTP call:
$http.get('URLpath')
.then(function(response){
$scope.ProfileImage=response.data;
}
The image is getting loaded from the source but it is not displayed immediatley when i log in.
It is displayed after refreshing the page.
var app = angular.module('myApp', []);
app.controller('DemoCtrl', function($scope, $http) {
$scope.myObj = {
"image":"https://www.w3schools.com/css/trolltunga.jpg",
};
});
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="DemoCtrl">
<img src="{{myObj.image}}" width="100" height="100">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
You should either wrap your image to ng-if so it should appear after the data is loaded or assign some valid data to $scope.ProfileImage before response comes. Otherwise, your ng-src is neglected.
thanks for the response guys.
This issue is fixed by storing the image to window local storage and then accessing it using angular {{ProfileImage}}.
I'm starting a new project and am going to be using angularjs.
The page structure is the follow:
/views
loginView.html
mainView.html
loginMaster.html
mainMaster.html
My problem is set the other master page(mainMater.html) after the login.
The routing function is follow:
mainapp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/login', {
controller : 'loginController',
templateUrl : '/views/loginView.html'
}).when('/', {
controller : 'mainController',
templateUrl : '/views/mainView.html'
}).otherwise({
redirectTo : '/login'
});
}]);
AngularJS is great for single page applications, which means if you exit the context of javascript by loading an entirely new page, you'll have to setup the context again. I would recommend you to have just one master page (load the page from the server once and perhaps have something like:)
<html ng-app="myApp">
...
<body>
<div class="container" ng-view>
and keep changing the entire view within the ng-view context. Have the login screen, signed in experience, all of it in the same place.
My app is doing large amount of database queries and it holds the loading page blank white while doing it. I was wondering if there is anyway I can show the loading icon during the query.
<?php
//large queries
//if all queries pass
//do the redirect
header('Location: index.html');
//else show login screen.
?>
<html>
//show login screen….
</html>
My question is how to show the loading icon when php query database
Thanks.
redirect user to a loading page 2. make an ajax request to the actual content script (does the heavy lifting) 3. when content is ready replace part of the loading page with actual content
Example of a loading page: (index.php returns content of body -element for the page)
<script>
$(document).ready(function() {
$.get("index.php", function(data) {
$("body").html(data);
console.log("page was loaded");
});
});
</script>
<html>
<body>
page is loading // <- shown while loading the page
</body>
</html>
note: example above expects that jquery is included
i am creating an ipad app
i have a side navigation, and then a main window. user will click links in the navigation and pages will load up in the main window.
i use ajax to dynamically load my pages in my main window, but when my pages load they do not load with their own css or js files, which i have linked in the page html file.
instead i belive they take on the CSS of the entire site.
i have read i can use 'loadobjs' to load my CSS and my page loads dynamically.
how can i use that with my code?
a reply will be greatly appreciated
thank you
code provided below:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
This doesn't directly answer your question, but my recommendation is for the outer page's CSS to have all the necessary information for each child page you load.
Also, you shouldn't load entire HTML documents via AJAX; your DOM would end up looking something like this (which is bad)
<html>
<head>...</head>
<body>
<div id="ajax_panel">
<html>
<head>...</head>
<body> Content </body>
</html>
</div>
</body>
</html>
Instead, modify your inner documents to only contain the information that should be in your div#main_content_inner.