防止在iframe中加载CSS背景图片 [英] Preventing CSS background image loading in iframe

问题描述

我正在开发一个Web应用程序，它需要编辑单个网页。

目前，需要编辑的页面被加载到iframe中。在编辑模式下，还将与内联编辑，图像编辑相关的库注入到iframe中。

要保存以编辑模式加载的网页，必须清理一些html部分，注入库，目前使用另一个隐藏的iframe，其中编辑iframe html内容被写入隐藏的iframe，然后不需要的标记或脚本被删除，然后保存这些内容。

当内容被写入隐藏的iframe时，它开始请求图像。我想阻止这一点。因此，对于< img> 标记来防止图片请求，在将内容写入隐藏的iframe之前，<$ c src = 字符串被替换为 data-src =

我们实现了防止图像加载CSS背景图像？

解决方案

您可以使用以下CSS禁用所有背景图像：

  * {
 background-image：none！important; 
} 
  

通过直接在您的iframe中添加此css，或者通过向body并将其添加到您的css：

  body.no-images，body.no-images * {
 background - 图像：无！重要; 
} 
  

注意：可以找到更准确的规则。 *不是表现最好的。

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?

解决方案

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.

这篇关于防止在iframe中加载CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！