禁用iFrame内部的外部内容加载
禁用iFrame内部的外部内容加载
提问于 2019-06-16 14:25:21
在iFrame中是否存在禁用加载外部内容的问题？假设有一个iframe定义如下：
<iframe srcdoc="
<html>
<head>
<title>Example Page!</title>
<link rel='stylesheet' type='text/css' href='http://example.com/mystyle.css'>
</head>
<body>
<p class='main'>Here goes the text.
</p>
<script src='http://example.com/js/superscript.js'>
</body>
</html>">
</iframe>JS的加载可以在sanbox属性中使用允许脚本禁用，但是有任何方法禁用外部css (和其他外部内容)的加载吗？
如果没有，是否有任何替代“呈现”html代码(例如，用JS)来实现这一点？
回答 2
Stack Overflow用户
发布于 2020-04-15 15:10:27
我做了以下功能，以删除在iframe中显示的电子邮件中的一些资产：
const replaced = []
const h = html
.replace(/url\s*\(([\s\S]+?)\)/g, (m,url) => {
url = url.trim()
try {
url = decodeURIComponent(url)
} catch (err) {/**/}
replaced.push(url)
return 'url()'
})
.replace(/[\s'"](?:src|srcset|background)?\s*=\s*(['"])([^\1]*?)\1/g, (m,q,src) => {
if (!src) return m // empty
replaced.push(src)
return ''
})
.replace(/<\s*link[^>]*?([\s'"]href\s*=\s*(['"])([^\2]*?)\2)/g, (m,attr,q,src) => {
if (!src) return // empty
replaced.push(src)
return m.replace(attr, '')
})有趣的是，<img alt="test"src="http://src.com/img.jpg">是有效的，并且将由chrome显示，所以在实际上不需要属性之前会显示空格，所以我编辑了这个答案以说明.
它可能并不完美，但您可以通过添加属性来调整它，因为您可以看到更多的情况。
Stack Overflow用户
发布于 2021-01-05 13:41:27
是的，您可以通过使用src而不是srcdoc并使用data:text/html;charset=UTF-8,前缀来实现它。
在你的例子中：
<iframe src="data:text/html;charset=UTF-8,<html> <head> <title>Example Page!</title> <link rel='stylesheet' type='text/css' href='http://example.com/mystyle.css'> </head> <body> <p class='main'>Here goes the text. </p><script src='http://example.com/js/superscript.js'> </body> </html>">
</iframe>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56619724
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号