需求:旧的jquery页面,需要引入到react中,用iframe引入,并且初始化jquery的一些数据,还要根据子内容来自适应iframe高度
const contentIFrameRef = useRef<any>(null)
useEffect(() => {
initdata()
}, [])
const initdata = async () => {
const iframe: any = contentIFrameRef.current
axios.get(`http://172.16.139.63:8300/customer-feedback/v1/comment-card/html/819E4007?format=json`).then((response) => {
const data = response.data.Result.Html;
const iframeDocument = iframe.contentWindow.document
iframeDocument.open();
iframeDocument.write(data);
iframeDocument.close();
})
iframe.onload = function () {
var someNewScript = document.createElement('script');
var scriptUrl = document.createElement('script');
scriptUrl.src = 'https://promotions.newegg.com/Newegg/Feedback/Scripts/custom-feedback.min.js?v=$ScriptVersion';
someNewScript.innerText = `jQuery("input[name='186_NoType_141']").val("123");jQuery("input[name='198_NoType_171']").val("qwe");`;
iframe.contentWindow.document.getElementsByClassName('form-cells')[0].appendChild(someNewScript);
iframe.contentWindow.document.getElementsByTagName('head')[0].appendChild(scriptUrl);
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
};
}
<iframe ref={contentIFrameRef} width='100%'/>
网友评论