How do I stop images or flash from loading into the browser? - html

I am creating a web page that accepts a hyperlink from the user and displays that page in an iframe. While rendering the page, I would like to show just the text and simple colors, thats it.
I would like to block all the media files like images and flash scripts from showing up.
If not an extensive one, for the starters, I would like to confine the scope to .gif, .jpeg, .jpg, .png, .swf.
Or does anyone know of a site with similar functionality?

You can write a simple dom parser and parse the page before show it in iframe. Then before showing it you can remove whatever you want.
your iframe whould like
<iframe src="your_parser.php"></iframe>
In your parser you can get the content from page using file_get_contents() or curl() it is your choise (i would use curl). Then you can remove the media you want.

If you're using Firefox, use the Adblock Plus extension. You can specify the types of items to block via a filter rule. An example (using Safaribooks) looks like this:
||techbus.safaribooksonline.com/static/201109-2191-techbus/images/6.0/*.jpg
However, if you're talking about incorporating functionality into your page to strip out a specific list of content-types, this approach wouldn't help you. You'd need to pull the html source and strip out the offending content-types.

also if you are using cms. you should be turn off bbcode image, and embed html

Related

Twitter and Instagram Embed WCAG

Our site is trying to be as WCAG compliant as possible, but we are challenged when trying to embed Tweets and Instagrams.
The embed code looks like <blockquote>....</blockquote> but renders on the fly to <iframe></iframe>
Since we have no control over the rendered view, the iframe doesn't have a title for example.
Is there a way or an recommendation to put something in a surrounding <div> that can at least warn the screen reader or other tools that an iframe is happening on an external site.
I tried using aria="section" label="External Website in Iframe" for example, but I don't know if that gets used by the tools and if it's effective enough.
Thanks
I would add a title on all iframes on the fly, with Javascript - if I would have the correct title. Or make a plugin (wrapper) so that when author pastes the URL of a tweet she must also write the title and then make Javascript to add title attribute to the iframe.
Maybe worth trying?

Convert rendered HTML 5 display (visible and invisible) to image when using HTML 5 canvas

Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.
I found this...
html to jpg with c#
However...
I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.
It looks like you should be able to do it using javascript with this technique:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Make sure to take note of the following caveat however:
Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.
EDIT: You may also want to check out these related questions:
Save HTML5 canvas contents, including dragged-upon images
How to save a HTML5 Canvas as Image on a server

How can I make an iframe capture ONLY one element of a web page?

I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.

Embedding PDF using <embed>

I am trying to embed a PDF in my webpage using this HTML tag
<embed src="instructions_after_extraction.pdf#navpanes=0" style="width:500px; height:375px;" />
If you have noticed, I have turned off the navigation panes using navpanes=0. However, is there a way to specify the available buttons in the toolbar? I'm already aware that toolbar=0 removes the toolbar from the display, but is there a way to turn off each button separately?
Regards.
I don't believe such control exists. However, on a side note, I would be vary of using the embed tag in the first place. An object tag with a number of parameters is the more appropriate solution.
The GUI settings with which a PDF needs to be displayed can be specified by the PDF-creation software too.

Embed a webclip

I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).