php iframe 不执行,iframe内部添加的<script>标签中的js不执行?

通过动态插入的方式,能让脚本执行,直接放进去没法执行

var ifr = document.createElement('iframe');

ifr.id = 'uiui'

document.body.append(ifr)

var ifrBody = document.getElementById('uiui').contentDocument.body;

var script = document.getElementById('uiui').contentDocument.createElement('script');

script.innerHTML = `

var p = document.createElement('p');

p.innerHTML = 'o_o'

document.body.appendChild(p);

`;

document.getElementById('uiui').contentDocument.body.appendChild(script);

在React,如果你想要在一个组件里嵌入一个IFrame,并让其高度自适应内容,同时又因为安全原因需要处理跨域问题,可以采取以下步骤: 1. 高度自适应: 使用JavaScript监听IFrame的`contentWindow`或`contentDocument`对象的`DOMContentLoaded`事件,当页面加载完成后再获取IFrame的实际高度,并设置到IFrame的`height`属性上。例如: ```jsx import React, { useEffect, useRef } from 'react'; const CustomIframe = ({ src }) => { const iframeRef = useRef(null); useEffect(() => { const handleLoad = () => { if (iframeRef.current) { const doc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document; const height = doc.documentElement.scrollHeight || doc.body.scrollHeight; iframeRef.current.style.height = `${height}px`; } }; if (iframeRef.current && !iframeRef.current.contentDocument) { // 当IFrame加载完成后调用handleLoad iframeRef.current.onload = handleLoad; } return () => { // 移除onload事件防止内存泄漏 if (iframeRef.current && iframeRef.current.onload) { iframeRef.current.onload = null; } }; }, []); return ( <div> <iframe ref={iframeRef} src={src} sandbox="allow-scripts allow-same-origin" /> </div> ); }; // 使用该组件时,将src设置为你需要的内容地址 <CustomIframe src="https://example.com" /> ``` 2. 跨域限制: 上述代码通过`sandbox`属性设置了部分跨域权限,`allow-scripts allow-same-origin`允许了脚本执行和同源访问。如果完全跨域,你需要服务端支持JSONP或者使用CORS策略。在服务器端设置响应头,允许特定来源的请求。 **相关问题--:** 1. JSONP如何解决跨域问题? 2. CORS在哪些场景下会受到限制? 3. 是否有其他替代方案在React处理跨域IFrame内容显示?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值