I'm loading different file types inside an
<object> tag, one by one, by a button click. The file types are -
html, img & pdf . The file names are stored in an array.
If there is an
img file after the
pdf , it does not load. Only
html files load after the
pdf will load.
Using
AngularJs to perform the actions.
HTML: <button ng-disabled="fileCount()" ng-click="showNextSlide()">Next</button>
<object class="objView" data="{{fileSource}}" type="{{fileType}}"></object>
JS: var app = angular.module("feedboxApp", []);
app.controller("ctrl", function ($scope) {
$scope.fileSource = "";
$scope.fileType = "";
$scope.projectfiles = [
{ src: "page1.html", type: "text/html" },
{ src: "1.jpg", type: "image/jpeg" },
{ src: "page2.html", type: "text/html" },
{ src: "tracker.pdf", type: "application/pdf" },
{ src: "2.jpg", type: "image/jpeg" }
];
$scope.fileCount = function () {
return $scope.projectfiles.length > 1 ? false : true;
}
var i = 0;
$scope.showNextSlide = function () {
if (i + 1 >= $scope.projectfiles.length) {
i = 0;
}
else {
i = i + 1;
}
$scope.embedFile(i);
}
$scope.embedFile = function (i) {
$scope.fileSource = $scope.projectfiles[i].src;
$scope.fileType = $scope.projectfiles[i].type;
}
$scope.embedFile(0);
});
The page first loads with 'page1.html' as desired. On button click, it loads, 1.jpg' and so on till tracker.pdf. If I click on the button now, it does not load 2.jpg. When I see the html, it shows data="2.jpg" though.
If I put a html file instead of 2.jpg in the array, it loads fine on button click, after pdf.
Can the <object> not load an image file after it has a pdf file.