react动态加载iframe

Posted 2023-05-03

参考技术A react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。
情况1：后端返回一个完整的网页，前端直接 `<iframe src="$url"></iframe>` 就可以了。
情况2：后端返回内容不可控 (比如以下例子)。
用法：
index.tsx:
export default function Iframe ()
const contentIFrameRef = useRef<htmlIFrameElement>(null)
const [iframeHeight, setIframeHeight] = useState(0)

useEffect(() =>
$api.xxxxx(xxx)
.then((res) =>
const iframe: HTMLIFrameElement | null = contentIFrameRef.current
if (iframe && iframe.contentWindow)
const iframeDocument = iframe.contentWindow.document
// 写入内容（这里举例的 iframe 内容是请求接口后返回 html，也就是 res，比如 res="<h1>标题</h1>"）
iframeDocument.write(res)
// 如果需要 css，写入 css，此处的 css 是写在根目录里（与 index.html 同级）
if (!(iframeDocument.getElementsByTagName('link')[0]))
const link = iframeDocument.createElement('link')
link.href = process.env.PUBLIC_URL + '/template.css'
link.rel = 'stylesheet'
link.type = 'text/css'
iframeDocument.head.appendChild(link)

// 这里动态计算 iframe 的 height,这里举例 300px
setIframeHeight(300)

)
, [])

return (
<iframe
ref=contentIFrameRef
title="iframe"
style= width: 1120, border: 0, height: <strong>iframeHeight</strong>
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
scrolling="auto"
></iframe>
)

如果后端把 iframe 的内容放在服务端，返给前端一个 url，可以直接 <iframe src=Url></iframe>

将子 ID 动态添加到 iframe 代码

【中文标题】将子 ID 动态添加到 iframe 代码

【英文标题】：Dynamically add sub id to iframe code

【发布时间】：2012-09-06 16:33:02

【问题描述】：

如何在页面或 iframe 加载之前从目标 url 获取子 ID 并动态插入 iframe 代码？

这是我在目标网址末尾的代码

&subid=campaignname_keyword

这是我希望 subid 在加载前动态插入的 iframe 代码

<iframe border="0" frameborder="0"   src="http://xxxxxxx.com?PublisherSubID=</iframe>                    

【问题讨论】：

好像你需要插入 php 代码，或者 JS 脚本..？

【参考方案1】：

试试这个。

这样形成你的 URL:: (# 在那里)

http://example.com/page.html?#subid=subid_keyword

然后使用这个 jscript ::

$(document).ready(function() 
    var tags = ["subid"];
    for (var i = 0; i < tags.length; ++i) 
        var param = GetURLParameter(tags[i]);
        if (param) 
            var subid = GetURLParameter('subid');
        
    

if(typeof(subid) != 'undefined' && dynimage != null && dynimage != '') 
    document.getElementById('subid-iframe').innerHTML = '<iframe border="0" frameborder="0"   src="http://xxxxxxx.com?PublisherSubID=' + subid + '</iframe>"';
    
);

function GetURLParameter(sParam) 
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
            return sParameterName[1];
        
    

并使用带有...的innerHTML将您的“subid”值插入到iframe标签中。类似这样的标记：

<span id="subid-iframe"></span>  

这可能需要一些调整......它对我有用。我知道你想做什么。