I want to use indexedDB in my IE11, but it seems to be undefined. This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script>
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
if (IDBTransaction) {
window.IDBTransaction.READ_WRITE = window.IDBTransaction.READ_WRITE || 'readwrite';
window.IDBTransaction.READ_ONLY = window.IDBTransaction.READ_ONLY || 'readonly';
}
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
alert(document.documentMode);
alert(document.compatMode);
</script>
</head>
<body>
The content of the document......
</body>
</html>
it alerts:
Your browser doesn't support a stable version of IndexedDB.
11
CSS1Compat
Does anyone know what's wrong?
Thanks
I suspect you're trying to do this from a local file (e.g. c:\test.html) rather than an HTTP resource. IE probably restricts access to the API from file (or non-HTTP) origins.
If I save your content locally to a file it alerts as you noted in IE. If I serve the content via a server, it works correctly.
A simpler example:
<script>
alert(window.indexedDB);
</script>
Local file: undefined
Served: [object IDBFactory]
For example:
alert(window.indexedDB);
Related
DISCLAIMER: I'm a complete newbie to programming. I've my experiences with editing code through trial and error, but I do not have any real knowledge.
I'm looking to build a website from scratch. How do I make it so that I don't have to paste the same header/footer code to every page? I'd assume that there is a designated file for the header/footer; on the pages which I want to include the header/footer, I would have to include a line of code to call it?
Also found this similar question/topic/thread: Use same header and footer on all webpages
if you are looking to do it using just Html there is no possible way, but you can use JavaScript inside your html to create a custom attribute which will include your html files. You can read more about it here - template tag examples
This is not the best solution for this, I won't personally recommend you to do this as you are a beginner.
This might be overwhelming at first but you don't need to understand or learn it right now. For a quick example -
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test File</title>
</head>
<body>
<div include-your-html = "header.html">
<!--Cosidering I have header.html file in the same directory-->
<p>This is my body</p>
<div include-your-html = "footer.html">
<!--Cosidering I have footer.html file in the same directory-->
<!--You can use this script to set the attribute-->
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("include-your-html");
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
elmnt.removeAttribute("include-your-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
includeHTML()
</script>
</body>
</html>
For some of the people this may be blocked due to CORS policy, you can set up a CORS proxy to get around this. More detailed information at sideshowbarker's answer here
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
I'm having an issue with the Google Docs viewer that is causing a nightmare to solve because it only happens intermittently. I'm looking for guidance on how to make the content in the iframe load everytime without issue as it should.
Steps to reproduce
1) This page is a basic HTML page with a h1 tag and an iframe containing a link to a PDF on the same server
http://bit.ly/1mqbuf7
2) When you load the page, the pdf document will load in the iframe 60% of the time.
3) If you hit refresh 10 or so times, at least once it will fail to appear. Google returns a 307 first (Which it also does when it works) and then returns a 204 - no content. When it works, it returns a 200, with the content you see in the viewer.
I'm struggling to understand why it only does this some of the time with no visible errors. This has been tested and failed on Google Chrome v 48.0.2564.103 (PC) and Internet Explorer Edge v25.10586 (PC) with the same results and frequency of failure.
Any guidance would be greatly appreciated.
This is not fixing your problem per se, but since I had the same problem and I eventually managed to find an acceptable solution, I thought I'd share it.
var $docViewer = $(`<iframe src="${newValue}" height="100%" width="100%"></iframe>`);
//If using modern browser, use and embed object
if (window.chrome || typeof (window.mozInnerScreenX) != "undefined")
$docViewer = $(`<object width="100%" height="100%" data="${newValue}" type="application/pdf">
<embed src="${newValue}" type="application/pdf">
<p>This browser does not support PDFs.Please download the PDF to view it: Download PDF.</p>
</embed>
</object>`);
//Add the new viewer
$docViewer.appendTo($("#invoicePreview"));
Basically, use an embed if modern browser, and the gviewer if not. The embed object behaves identically to the google doc viewer, it works in 100% of cases (no failed loads), but since it's not supported for IE and/or low-end mobile devices, use the google doc viewer for that... Progressive Enhancements I guess.
Here's a "hack" that will ensure a proper loading every time (albeit with some delay, due to potential failed attempts - it's Google's fault, don't shoot the messenger!). The 2s interval duration can be modified to best fit the time expected for a successful effort to start loading the iFrame.
HTML:
<div id="test-id-1" style="text-align: center; width: 100%; height: 1150px" class="embed-pdf" data-url="{insert_pdf_link_here}"><span class="loader">Please wait...</span></div>
JS:
$(document).ready(function() {
let embed_pdfs = {};
$('.embed-pdf').each(function() {
var $pdfViewer = $('<iframe src="https://docs.google.com/viewer?url=' + $(this).data('url') + '&embedded=true" style="width: 100%; height: 100%" frameborder="0" scrolling="no"></iframe>');
$pdfViewer.appendTo($(this));
console.log($(this).attr('id') + " created");
embed_pdfs[$(this).attr('id')] = 'created';
});
$(document).find('.embed-pdf iframe').load(function(){
embed_pdfs[$(this).parents('.embed-pdf').attr('id')] = 'loaded';
$(this).siblings('.loader').remove();
console.log($(this).parents('.embed-pdf').attr('id') + " loaded");
});
let embed_pdf_check = setInterval(function() {
let remaining_embeds = 0;
$.each(embed_pdfs, function(key, value) {
try {
if ($($('#' + key)).find('iframe').contents().find("body").contents().length == 0) {
remaining_embeds++;
console.log(key + " resetting");
$($('#' + key)).find('iframe').attr('src', src='https://docs.google.com/viewer?url=' + $('#' + key).data('url') + '&embedded=true');
}
}
catch(err) {
console.log(key + " reloading");
}
});
if (!remaining_embeds) {
clearInterval(embed_pdf_check);
}
}, 2000);
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="iframeContainer"></div>
</body>
<script>
var URL = "https://docs.google.com/viewer?url=http://www.africau.edu/images/default/sample.pdf&embedded=true";
var count = 0;
var iframe = ` <iframe id = "myIframe" src = "${URL}" style = "width:100%; height:500px;" frameborder = "0"></iframe>`;
$(`#iframeContainer`).html(iframe);
$('#myIframe').on('load', function(){
count++;
if(count>0){
clearInterval(ref)
}
});
var ref = setInterval(()=>{
$(`#iframeContainer`).html(iframe);
$('#myIframe').on('load', function() {
count++;
if (count > 0) {
clearInterval(ref)
}
});
}, 4000)
</script>
</html>
Change var URL = your_googel_docs_pdf_url
The code will keep loading the url into iframe until the doc loads successfully.
It's not the best solution. But I waited a few seconds after the page loaded and checked if the iframe was loaded (see how below). If it wasn't, then I set the iframe's src attribute to null and then back to the correct source, affectively reloading it. Then waited a few seconds to check again and repeated. Once it has loaded you can stop checking.
conditionalPdfIFrameReloadTimeout() {
setTimeout(() => {
let iFrame = document.GetElementById("pdfIframe")
if (iFrame.contentDocument/*pdf iframe failed to load*/) {
iFrame.src = null
iFrame.src = "the url to your pdf"
conditionalPdfIFrameReloadTimeout()
}
}, 6000)
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="width:100%; height:100%;">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body id="iframeContainer" style="height: 100%; width: 100%; overflow: hidden; margin:0px;">
<script>
var URL = "https://docs.google.com/gview?url=enteryoururl&embedded=true";
var count = 0;
var iframe = `<iframe id = "myIframe" src = "${URL}" style="width:100%; height:100%;" frameborder="0" allowfullscreen=""></iframe>`;
$(`#iframeContainer`).html(iframe);
$('#myIframe').on('load', function(){
count++;
if(count>0){
clearInterval(ref)
}
});
var ref = setInterval(()=>{
$(`#iframeContainer`).html(iframe);
$('#myIframe').on('load', function() {
count++;
if (count > 0) {
clearInterval(ref)
}
});
}, 2000)
</script>
</body>
</html>
The above code worked for me.
We try to upload a zip file using the “FileReader” javascript object on the client. For small files, everything seems to be fine. If we use a zip input file of 132Mo, in Firefox v21.0 on Windows 7, the first upload from the local disk thru the javascript object works well. But, if we try to select another file and start the transfert, Firefox crashes…. In Chrome v27.0 on Windows 7, it crashes(see the ‘oups’ page) on the first try. We tried on a Mac OS with same browsers without problem. Mainly strange but when the Windows task manager window is open, no more crash in Firefox or Chrome while loading big files. Maybe the presence of this TOP window forces the garbage collector to do its work faster?
Has anyone already faced this issue? As reference, I joined a simple HTML page that may reproduce the behavior.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#btnFile").change(startUpload);
});
function startUpload(e)
{
this.fileHandle = e.target.files[0];
var reader = new FileReader();
reader.onprogress = function (data)
{
if (data.lengthComputable)
{
var progress = parseInt(((data.loaded / data.total) * 100), 10);
$("#progress").html("Reading file: " + progress + " %");
}
};
reader.onloadend = function ()
{
$("#progress").html("Reading completed!");
};
reader.onerror = function (errorEvent)
{
console.error("FileReader error", errorEvent);
};
reader.readAsDataURL(this.fileHandle);
};
</script>
</head>
<body>
<input type="file" id="btnFile" />
<div id="progress"></div>
</body>
</html>
Following code works fine in Chrome, but fails in IE9 - in processFiles() when we retrieve selected files e.target.files is null
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</header>
<body>
<input type="file" id="uploader"/>
<script>
var uploader = document.getElementById ("uploader");
if (uploader.addEventListener) { // all browsers except IE before version 9
uploader.addEventListener ("change", processFiles, false);
}
else {
if (uploader.attachEvent) { // IE before version 9
uploader.attachEvent ("change", processFiles);
}
}
function processFiles(e)
{
var files = e.target.files || e.dataTransfer.files;
for (var i = 0 ; i < files.length ; i ++)
{
window.console && console.log && console.log(files[i].name);
}
}
</script>
<body>
Any ideas?
Your code assumes support for the File API. The first version of IE to support the File API is IE10. Your code will never work cross-browser as it stands now.
Consider using Fine Uploader which already handles uploads cross-browser and includes a number of useful features.