0

I am working on a Web App, which requires single webpage to be edited.

Currently, the page that needed to be edited is loaded in an iframe. Also libraries related to inline edits, image edit are injected into iframe in edit mode.

To save webpage loaded in edit mode, it is necessary to clean up some html part and injected libraries, currently another hidden iframe is used in which edit iframe html contents are written into hidden iframe and then unwanted tags or scripts are removed and then this contents are saved.

When contents are written into hidden iframe, it starts requesting for images. I want to prevent this.

So for <img> tags to prevent image requests, before writing contents into hidden iframe, src= strings are replaced with data-src=

How can we achieve preventing image loading for CSS background-image?

Bharat Patil
  • 1,398
  • 1
  • 11
  • 28
  • are you operating on strings or do you have access to the DOM? – Toni Leigh Sep 18 '15 at 06:49
  • If the backgrounds are used in inline style attributes, you can do it the same way; replacing `style=` by `data-style=`. – Mr Lister Sep 18 '15 at 06:52
  • reading html from save iframe (this is string using jquery html method) and writing it into hidden iframe (for dom operations). – Bharat Patil Sep 18 '15 at 06:56
  • @MrLister - Thanks. I will try that. I started feeling so stupid. So if there is no inline style? – Bharat Patil Sep 18 '15 at 06:57
  • Actually for background image I had tried replacing url( with data-url( however this caused problem of background-image style getting stripped in Chrome. – Bharat Patil Sep 18 '15 at 07:00

1 Answers1

0

You could desactive all background image with the following CSS:

* {
  background-image: none!important;
}

By adding this css directly in your iframe, or by adding a class to the body and adding this to your css:

body.no-images, body.no-images * {
  background-image: none!important;
}

note: A rule more precise could be found. "*" is not the best for performance.

Kustolovic
  • 172
  • 6
  • I was about to add answer but just saw your answer. Yes I also tried exactly the same thing. Though I'm using more precise css rule rather than "*" :) – Bharat Patil Sep 18 '15 at 09:16