Find failed images and videos in HTML document - javascript

Given a long web page that includes several embedded images and videos from external sites.
If I embed the images like this <img src="https://path-to-image.jpeg" alt="*ERROR*">, and some of them fail to load, I can search for "*ERROR*" in the browser to find the problematic images. I can also style the text message using CSS to be visually prominent.
For example: (right-click on the word to verify that it is indeed an <img> element)
This unfortunately does not work for some sites that redirect URLs that point to removed images. Specifically, for imgur.
For example, <img src="https://i.imgur.com/missing.jpg" alt="*ERROR*"> will display this:
(which is a redirect to https://i.imgur.com/removed.png)
Likewise, if a video embedded as <video><source src="https://path-to-video.mp4"></video> is not found, it will display something like this:
How can I replace (or overlay) such redirected images or missing videos with text elements
(that can be searched for in the browser) using HTML/CSS/Javascript? Preferably without relying on external libraries like jQuery.
Please note that I am not very familiar with Javascript and DOM so details will be very much appreciated!

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Javascript integrated web browser?

I have two different questions I would like to ask. I am new to javascript and I am trying to create a project ... of some sort.
Firstly, is it possible to have an integrated webbrowser within ... say a PHP page? e.g. using javascript, I have a canvas sized 500 x 700 within my "index.php" page, and can navigate to any website while remaining on my "index.php", but the websites appearing on that canvas?
If this is not possible, then is it possible to navigate to a website, and then interact with the elements thereof? I doubt this because you would no longer be connected to your file if you rediirect to another website, hence the integrated idea.
If neither or those are a possibility, then is it at all possible to interact with an EXTERNAL website's elements? External being not yours in this context.
You can use an iframe tag to load an external page, however
With most modern browsers you're not allowed to interact with the elements for security reasons
Many sites (still for security reasons) don't want to be loaded inside an iframe and they try to either escape the iframe or just render back a blank page instead.
One security problem is that a malicious page could open an iframe with e.g. a buy page of amazon.com and then render over it another opaque element that lets the click go through it.
This way a user may be tricked into click over a "watch the cute kitties" button and instead is clicking on the one-click-buy button of amazon (or liking a facebook page, or starting following a spammer on twitter or ...).

How can I make a web-page preview

I'd like to place a modal window with a description of an external page. But to give the user more information about the page he about to visit I'd like to provide him with a page preview.
I can see the following ways:
render a page with tools like CutyCapt - not working on my hosting :(
make the screenshot with external recources (I found some - all not
for free, I would try to find free tools)
show the page as it is using something like frame (frame tag is not
supported by HTML5).
My questions:
Is there any PHP tools to render a web page to PNG image not so
demanding as CutyCapt is?
May be I missed any worthwhile online tool to render a page to an
image?
I never used "frame" approach earlier so: is there any pros and cons to go deep into
it? Am I right that HTML5 analog of <frame> tag is <iframe>?
Did I missed any other way to do my job?
Thanks!
I once had a function on a page of mine which would load a specific page using an ajax-request and php-curl functions and then would just dump all the contents in a dynamically created <div> (Although I agree that the <iframe> is a better choice for this). But at that time I could not really adjust its size which made it kind of clumsy.

Convert div(Part of webpage) to image

I'm trying to capture a part of web page as image, programmatically, i.e., using Javascript or JQuery. I have tried with html2canvas, but it is not working when I have swf objects and iframes.
My web page may contain swf file(Fusion charts), iframes, text, and images. I'm trying to convert all the objects into a single image. Does anyone know a possible solution, that works also on IE9?
Setup a virtual machine which reads a list of websites to capture
wget ...
every now and then
/etc/crontab
let it open an url
firefox http://....
and then take a screenshot from a second shell
import -window root /home/ftp/screenshots_<id>.jpg
then close firefox instance / shell and loop that for all your urls
This can all be put into 1 shell script and loaded into a very small virtual box,
use awesome-wm or some tiny window manager. Also import needs imagemagick.
This is the only way you can capture html and flash and iframes like rendered by the browser in an hidden automatic process.

HTML5 Canvas Example Screenshots

I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.
If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).

Categories