Preventing CSS background image loading in iframe

问题:

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?

回答1:

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.