I have a iframe, which could either have a text message or a pdf and this text or pdf is very random in nature.
$('<iframe>', {
src: myRenderUrl,
id: 'myIframe',
frameborder: 0,
scrolling: 'no',
width : '100%',
height : '100%',
}).prependTo('#myDiv');
but after rendering the same I want to check if the iframe contains a pdf or a text, Is there a way to do this using the jquery/js
I found a way using the offsetHeight
if($("#myIframe").offsetHeight != undefined){
// do something
}
But the same thing is not helpful ,
Then using the below mentioned code I get the text but for pdf I gets the error
try {
var iframe = $("#myIframe");
content = iframe.contentWindow.document.body.innerHTML;
// text message obtained
}
catch(error) {
console.error(error);
// seems like obtained a pdf ,but not sure
}
But is there any other better way where it can be categorized if the iframe has text message or a pdf.
Related
In an electron application, I am trying to display an image from the local disc in a window
that opens when a button in the main window is clicked.
The image's path is known at runtime only.
My first approach was to generate a new window that loads a template html-file
when the click event on that button is triggered and then set the
src-attribute of the img-element in this html template,
but I did not succeed in getting a handle on this img-element defined in
"imgView.html" (the following is from the renderer-process):
newWindowBtn.addEventListener('click', function(event){
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
},
width: 500, height:500});
win.loadFile("imgView.html");
// how can the img-element defined in the template imgView.html
// be accessed here to set the src-attribute?
win.show();
win.on('close', function(){win=null})
})
I want to be able to have several windows open at the same time, with different images loaded.
My second approach was to dynamically generate the html to be loaded:
var html = [
"<body>",
"<p>Sample image: </p>",
"<img src=\"img.png\" style=\"width:90%\">",
"</body>"
].join("")
and replace the win.loadFile command in the newWindowBtn.addEventListener event-function
from above with
win.loadURL("data:text/html;charset=utf-8," + encodeURIComponent(html),
{baseURLForDataURL: __dirname + "/imgDir/"}
)
but apparently the image is not found (the rest of the page is loaded ok).
I played around with the format of baseURLForDataURL, but nothing worked.
Any ideas?
In some cases, I viewed that data:text/html;charset=utf-8," + encodeURIComponent(html) is not sufficient and you need to encode the html with base64: data:text/html;base64, + btoa(html).
Pay Attention
If this isn't a solution, this means that Electron doesn't allow to you to call the image because the page you'd like to load is considered an external page and you must encode the image with base64, too.
I want to enable the user to upload an image ,but i want the image to be resized at the cliet side ,before pass it to the server. So if the image to large it won't take long time.
Is any way to achieve that using JS or any tools ,
BTW I'm coding in Asp Mvc 5.
Changing image size after file select input change event :
<input type="file" id="fileSelect">
<img id="preview">
<script>
document.getElementById('fileSelect').onchange = function(event) {
ImageTools.resize(this.files[0], {
width: 720,
height: 480
}, function(blob, didItResize) {
//it will be true if it resize it, else false and will return the original file as blob
document.getElementById('preview').src = window.URL.createObjectURL(blob);
});
};
</script>
Update :
you need to add refrence for imagetools :
<script src="https://gist.githubusercontent.com/dcollien/312bce1270a5f511bf4a/raw/155b6f5861e844310e773961a2eb3847c2e81851/ImageTools.js"></script>
I have a object type tag in the page, which is used to show a pdf file.
Everything is working fine, but in Internet Explorer my sub-menu is getting hidden behind the object tag.
var objectTag = $('<object></object>')
.attr({ data: sourceURL + '#nameddest=self&page=1&view=FitV'
|| '', type: mimeType || '' })
.css({ width: '100%', height: '100%', zindex:'1' });
Please find red highlighted area.
I have tried many things. Please don't suggest z-index thing.
I'm afraid there isn't any pure answer to your question, but you can always add <br><br><br> before the PDF so that the PDF goes further down and doesn't touch the sub-menu.
Using javascript -- in an iPad html5 web app, is it possible to print a pdf which is loaded in an iframe?
I have tried numerous things without success such as:
var iframe = document.getElementsByTagName('iframe')[0]
if (iframe.attachEvent) {
iframe.attachEvent("onload", function(){
console.log("Local iframe is now loaded.");
iframe.contentWindow.print()
});
}
else {
iframe.onload = function(){
console.log("sLocal iframe is now loaded.");
iframe.contentWindow.print()
};
}
The iframe's url is '/data/xyz.pdf';
The goal is for the airprint dialog to open. This is a major issue for me, please help!!!
I think you are nearly get the solution. The only left is just how you print the iframe. Try to use this.
window.frames["iframe"].focus();
window.frames["iframe"].print();
Hope it helps
:)
A different way to the other two answers is to use CSS to print only the iframe:
#media print {
* {
display: none;
}
iframe {
display: block;
width: 100%;
height: 100%;
}
}
This basically makes the iframe the full width and height of the page, and hides other elements, so that the iframe is the only thing in view when the user clicks print. The advantage over the other options is that it will work with JavaScript turned off, which some users may have done for security reasons.
I'm pretty confident about safari supporting PDFObject. It's just an object to declare, pretty easy to use.
Even if not exactly an iframe, you can use a div this way :
<div id="pdfIframe"></div>
var pdf = new PDFObject({
url: "/data/xyz.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfIframe");
Source : http://pdfobject.com/
EDIT : I did not see it was a printing issue, so my answer isn't really one. BTW, i remember a friend using it, he had no problem to print it, so maybe there is an included printing support function.
I have a script that allows the user to upload images and preview them. It's a very basic script and although I have managed to get it to do more or less everything I need I am stuck on one last thing.
As it stands once the user has uploaded an image it is displayed but if they upload another one it displays both, I would like the new image to replace the old image so only one is visible.
I don't have issues with the php side of things, the problem lies in the part where the script appends the new image to list and displays the list rather than just the new image and unfortunately my javascript knowledge is quite limited at the moment.
This is the script:
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="upload/'+file+'" alt="" /><br />'+file);
} else{
$('<li></li>').appendTo('#files').text(file);
}
}
});
});
And the images are displayed here:
<ul id="files" ></ul>
Any help will be gratefully received
Instead of:
$('<li></li>').appendTo('#files')
Try:
$('<li></li>').appendTo($('#files').empty())
This will empty the #files element before appending new content.