Iframe Dom error :cannot read property "src" of null - javascript

I putted my editor.html in a iframe using this code :
<iframe name= "iframeEditor" id="ifrm" src="editor.html" width="1000" height="500" frameborder="0"></iframe>
then, i have to access to an element in a script balise in my "editor.html" :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
<!-- I use many resources -->
<script>
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var sResult = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
}
}, "image/png", oImageOptions);
return sResult;
}
</script>
</head>
<body >
<div id="diagramContainer"></div>
</body>
</html>
I should access to image.src from the iframe that contain my editor.htm so i try with this code :
<script>
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
</script>
but i get an error : cannot read property "src" of null

You are running script that looks for image element before image is loaded, so it's not yet added to DOM.
move your script to separate function:
function yourScript() {
var if1 = document.getElementById("ifrm");
var fc = (if1.contentWindow || if1.contentDocument);
var img1 = fc.document.getElementById("GraphImage");
console.log(img1.src);
}
and run it at the end of onloadend callback:
function generatePNG (oViewer) {
var oImageOptions = {
includeDecoratorLayers: false,
replaceImageURL: true
};
var sResult = oViewer.generateImageBlob(function(sBlob) {
b = 64;
var reader = new window.FileReader();
reader.readAsDataURL(sBlob);
reader.onloadend = function() {
base64data = reader.result;
var image = document.createElement('img');
image.setAttribute("id", "GraphImage");
image.src = base64data;
document.body.appendChild(image);
yourScript(); // your script is run after appending image to body
}
}, "image/png", oImageOptions);
return sResult;
}

Related

How to insert Image in iframe using JavaScript?

I'm making my own rich text editor. So instead of inserting an image through URL, I'm doing through local files.
Iframe
<iframe style="width:100%; height: 300px;" name="richTextField"></iframe>
My Question is How to insert an image in an iframe?
function image()
{
$('#myModal').modal('show');
var file = document.getElementById("image").files;
$('#uploadImage').click(function(){
loadImageFileAsURL();
});
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("image").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
//How to insert Image??
$('#myModal').modal('hide');
};
fileReader.readAsDataURL(fileToLoad);
}
}
}

Read a local text file using Javascript

I have read some of the previous questions on this topic but I really need to be 100% sure!
Is it possible to read from a .txt file on my local system and present it in my HTML-BODY?
I have tried several functions, here is one:
function readFile (path) {
var fso = new ActiveXObject('Scripting.FileSystemObject'),
iStream=fso.OpenTextFile(path, 1, false);
while(!iStream.AtEndOfStream) {
document.body.innerHTML += iStream.ReadLine() + '<br/>';
}
iStream.Close();
}
readFile("testing.txt");
The content of the file is simply around 100 words I want to read from the text file and display in my HTML-BODY.
Is this possible without having my own server?
You can use a FileReader object to read text file here is example code:
<div id="page-wrapper">
<h1>Text File Reader</h1>
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
</div>
<script>
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
</script>
Here is the codepen demo
If you have a fixed file to read every time your application load then you can use this code :
<script>
var fileDisplayArea = document.getElementById('fileDisplayArea');
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
fileDisplayArea.innerText = allText
}
}
}
rawFile.send(null);
}
readTextFile("file:///C:/your/path/to/file.txt");
</script>
Please find below the code that generates automatically the content of the txt local file and display it html. Good luck!
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var x;
if(navigator.appName.search('Microsoft')>-1) { x = new ActiveXObject('MSXML2.XMLHTTP'); }
else { x = new XMLHttpRequest(); }
function getdata() {
x.open('get', 'data1.txt', true);
x.onreadystatechange= showdata;
x.send(null);
}
function showdata() {
if(x.readyState==4) {
var el = document.getElementById('content');
el.innerHTML = x.responseText;
}
}
</script>
</head>
<body onload="getdata();showdata();">
<div id="content"></div>
</body>
</html>

not always same result with fileReader Javascript

I am using fileReader for checking if a profile picture uploaded matches with my conditions. However, i don't have always the same result. Can you help me to fix that bug ?
Here my htlm code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>File API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-wrapper">
<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput">
</div>
</div>
<script src="images.js"></script>
</body>
</html>
Here my javascript/fileReader (images.js) code:
window.onload = function()
{
var width=0;
var height=0;
var exten= false;
var size = false;
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e)
{
var file = fileInput.files[0];
var imageType = /image.png/;
if (file.type.match(imageType))
{
exten = true;
var reader = new FileReader();
reader.onload = function(e)
{
var img = new Image();
img.src = reader.result;
img.onload = function()
{
width=this.width;
height=this.height;
}
}
reader.readAsDataURL(file);
}
else
{
exten= false;
}
if(width == 50 && height ==50)
{
size = true;
}
else
{
size = false;
}
//Here, we check that the image matches with png and 50*50px
if(size && exten)
{
alert('Your image is ok.');
}
else
{
if(!size && !exten)
{
alert('Image needs to be 50*50px and in png');
}
else
{
if(!size && exten)
{
alert('Image needs to be 50*50px');
}
else
{
if(size && !exten)
{
alert('Image needs to be in png');
}
}
}
}
});
}
Thank you for your help
You've to wait the execution of the img.onload event before checking width and height.
The code that's outside that event handler and that uses those properties should be moved inside it.

HTML video player

I want to play video file from local disk in browser so I found this code. Can You tell me why it does not work? On jsfiddle it works but when i copy it into project it won't work. Also can You tell me what gives function declaration like function name(x){variables}(window).
The error I get is Uncaught TypeError: Cannot read property 'addEventListener' of null
Thanks for Your help :)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
(function localFileVideoPlayerInit(win) {
var URL = win.URL || win.webkitURL,
playSelectedFile = function playSelectedFileInit(event) {
var file = this.files[0];
var type = file.type;
var videoNode = document.querySelector('video');
var canPlay = videoNode.canPlayType(type);
canPlay = (canPlay === '' ? 'no' : canPlay);
var message = 'Can play type "' + type + '": ' + canPlay;
var isError = canPlay === 'no';
displayMessage(message, isError);
if (isError) {
return;
}
var fileURL = URL.createObjectURL(file);
videoNode.src = fileURL;
},
inputNode = document.querySelector('input');
if (!URL) {
displayMessage('Your browser is not ' +
'supported!', true);
return;
}
inputNode.addEventListener('change', playSelectedFile, false);
}(window));
</script>
<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay></video>
</body>
</html>
The problem is, your code is running before the DOM is ready/loaded.
There's two way to fix this.
1) Move the the entire javascript code block below <video controls autoplay></video>
or
2) Use document.addEventListener("DOMContentLoaded", function() { }); like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
var URL = window.URL || window.webkitURL,
playSelectedFile = function playSelectedFileInit(event) {
var file = this.files[0];
var type = file.type;
var videoNode = document.querySelector('video');
var canPlay = videoNode.canPlayType(type);
canPlay = (canPlay === '' ? 'no' : canPlay);
var message = 'Can play type "' + type + '": ' + canPlay;
var isError = canPlay === 'no';
displayMessage(message, isError);
if (isError) {
return;
}
var fileURL = URL.createObjectURL(file);
videoNode.src = fileURL;
},
inputNode = document.querySelector(("input[type=file]"));
if (!URL) {
displayMessage('Your browser is not ' +
'supported!', true);
return;
}
inputNode.addEventListener('change', playSelectedFile, false);
});
</script>

JavaScript: Why FileReader.onload does not get called in mozilla?

I am trying to upload an image using JavaScript. It works fine in Internet explorer and chrome but not in Mozilla!I also placed it at: http://jsfiddle.net/LKUS8/6/
Why reader.onload does not get called in Mozilla?
<html>
<head>
</head>
<body>
<input type="file" accept="image/*" capture="camera" id="fileLoader" name="fileLoader" style="display: none" />
<canvas id="bufferCanvas" style="display:none"></canvas>
<img id="img1" class="imgs" style="display:block">
<textarea id="textarea1" name="Pic1" rows="4" cols="50" style="display:none"></textarea>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="uploadImg.js"></script>
</body>
</html>
uploadImg.js:
fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var clickedImg = '';
var allImg = document.getElementsByClassName("imgs");
for (var i = 0; i < allImg.length; ++i) {
allImg[i].style.cursor = "pointer";
allImg[i].src = "https://cdn2.iconfinder.com/data/icons/picol-vector/32/image_add-128.png";
allImg[i].onclick = function (e) {
clickedImg = e.target || e.srcElement;//for ie 8 and before use e.srcElement
fileLoader.click(e);
}
}
fileLoader.addEventListener('change', handleFile, false);
textarea1 = document.getElementById('textarea1');
var ctx = bufferCanvas.getContext('2d');
function handleFile(e) {
var reader = new FileReader();
reader.onload = function (event) {
alert("reader.onload called"); //<-----
var img = new Image();
img.onload = function () {
clickedImg.src = img.src;
}
img.src = event.target.result;
}
reader.readAsDataURL(event.target.files[0]);
}
On the last line of the handleFile function you need to change:
reader.readAsDataURL(event.target.files[0]);
to
reader.readAsDataURL(e.target.files[0]);
You're using the wrong variable for the event as defined here function handleFile(e) {
Demo

Categories