在[html]标签的 sandbox iframe 里没有访问字体的权限,要测试可以前往这个页面:
我已经加了allow="local-fonts"但没效果,谁知道怎么正确添加权限?
<iframe class="useriframe" id="user_iframe_1" srcdoc="嵌入的网页代码" seamless="seamless" width="100%" height="300" style="border: none" allow="fullscreen local-fonts" sandbox="allow-forms allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"></iframe>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取目标 <a> 元素
const targetLink = document.querySelector('a.useriframelink');
if (!targetLink) return;
// 创建按钮元素
const previewBtn = document.createElement('button');
previewBtn.textContent = '新窗口预览';
previewBtn.style.cssText = 'margin-left: 10px; cursor: pointer;';
// 在 <a> 元素后面插入按钮
targetLink.insertAdjacentElement('afterend', previewBtn);
// 解码 HTML 实体的函数
const decodeEntities = (html) => {
const txt = document.createElement('textarea');
txt.innerHTML = html;
return txt.value;
};
// 点击事件处理
previewBtn.addEventListener('click', () => {
const iframe = document.querySelector('.useriframe');
if (!iframe) return;
// 解码 srcdoc 内容
const decodedContent = decodeEntities(iframe.srcdoc);
// 创建新窗口
const newWindow = window.open('', 'Preview', 'width=800,height=600');
if (!newWindow) {
alert('请允许弹出窗口');
return;
}
// 写入解码后的内容
newWindow.document.open();
newWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>预览</title>
<base target="_blank">
<style>body { margin: 10px }</style>
</head>
<body>${decodedContent}</body>
</html>
`);
newWindow.document.close();
});
});
</script>
<iframe class="useriframe" id="user_iframe_1" srcdoc="嵌入的网页代码" seamless="seamless" width="100%" height="300" style="border: none" allow="fullscreen; local-fonts" sandbox="allow-forms allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"></iframe>
https://www.thewebmaster.com/html/attributes/allow/
<iframe src="[insert source]" allow="camera 'none'; microphone 'none'"></iframe>
移动端浏览器都不支持Font Access API