iframe中src参数过长问题解决

iframe中src参数过长问题解决


问题描述:iframe的src跳转页面是get提交,get提交在浏览器中最大限制在2k以内,超过2k就终止跳转,所以就想办法用post跳转。


解决方法:

1、在父页面获得iframe的window对象。

2、往iframe里写入form表单,form表单使用post传输,并且写入要传递的大长度参数。

3、父页面控制iframe的form提交。



js

var url = 'mubiao.jsp';

var data = '此处为大数据';

var html = '<form action="'+url+'" method="post" target="_self" id="postData_form">'+

'<input id="wor_iteId" name="wor_iteId" type="hidden" value="'+data+'"/>'+

'</form>';

document.getElementById('ifr_1').contentWindow.document.wirte(html);

document.getElementById('ifr_1').contentWindow.document.getElementById('postData_form').submit();



页面

<iframe id="ifr_1" src="about:blank" width="100%" height="140px" noresize>


JS刷新iframe


有效方法:

var myIfr = document.getElementById('q_ifr');

myIfr.src = myIfr.src;





另外有用这个的

document.frames('q_ifr').location.reload();

我在使用的时候在谷歌和火狐下没反应。

要用还是用上面的那个好使。
<think> 我们正在解决如何根据iframe中引用的src内容的高度来设置iframe的高度。根据之前的讨论,有几种方法,但需要注意跨域问题。用户提供的引用中也展示了不同的实现方式。 总结要点: 1. 基本思路:在iframe加载完成后,获取其内部文档的高度,然后将这个高度设置为iframe的高度。 2. 跨域问题:如果iframesrc与父页面不同源,则无法直接通过contentDocument获取文档内容(会抛出安全异常)。 3. 解决方法:跨域情况下,需要使用postMessage进行通信,要求iframe内部页面在加载完成后将高度信息通过postMessage发送给父页面。 4. 动态内容:如果iframe内部内容高度会动态变化,我们需要监听内容变化并重新调整高度(例如使用MutationObserver)。 根据用户提供的引用,我们可以参考以下代码片段: 引用[1]和[2]都使用了iframe的onload事件,在加载完成后通过获取iframe内部文档的body的scrollHeight来设置高度。 引用[3]中除了使用scrollHeight,还额外增加了100px。 但是,这些方法在跨域时都会失效。 因此,我们分两种情况给出解决方案: 情况一:同源(推荐方法) 我们可以直接使用以下代码: ```html <iframe id="myFrame" src="inner.html" style="width:100%; border:none;"></iframe> <script> const iframe = document.getElementById('myFrame'); iframe.addEventListener('load', function() { try { const doc = iframe.contentDocument || iframe.contentWindow.document; // 计算内容高度 const height = Math.max(doc.body.scrollHeight, doc.body.offsetHeight, doc.documentElement.scrollHeight, doc.documentElement.offsetHeight); iframe.style.height = `${height}px`; } catch (e) { // 跨域情况下会抛出异常 console.error('无法获取iframe内容高度:', e); } }); </script> ``` 情况二:跨域(需要控制内部页面) 步骤: 1. 在父页面中监听message事件,接收来自iframe的高度信息。 2. 在iframe内部页面加载完成后,通过postMessage将高度发送给父页面。 父页面代码: ```html <iframe id="myFrame" src="https://不同域的页面.html" style="width:100%; border:none;"></iframe> <script> window.addEventListener('message', function(event) { // 为了安全,验证消息来源的域名(这里用*表示接收任何域,实际应指定域名) // if (event.origin !== "https://iframe的域名") return; if (event.data.type === 'resize-height') { const iframe = document.getElementById('myFrame'); iframe.style.height = event.data.height + 'px'; } }); </script> ``` iframe内部页面代码(inner.html): ```html <script> window.addEventListener('load', function() { // 计算自身文档高度 const height = document.documentElement.scrollHeight; // 发送给父页面 window.parent.postMessage({ type: 'resize-height', height: height }, '*'); // 这里第二个参数可以指定父页面的域,增强安全性,例如:"https://父页面的域名" }); </script> ``` 注意:跨域方案要求我们能够修改iframe内部页面的代码。 对于动态内容(内容高度会变化)的处理: 无论是同源还是跨域,如果iframe内部内容高度会变化,我们需要在变化时重新设置高度。 同源情况下,我们可以使用MutationObserver来监听DOM变化: ```javascript // 在iframe的load事件中 const doc = iframe.contentDocument; const observer = new MutationObserver(function() { const newHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight); iframe.style.height = `${newHeight}px`; }); observer.observe(doc.documentElement, { childList: true, subtree: true, attributes: true, characterData: true }); ``` 跨域情况下,内部页面需要在每次高度变化时主动发送postMessage。可以在内部页面中编写监听内容变化的代码,并在变化时发送高度。 综上所述,我们根据是否同源提供了两种主要方法,并考虑了动态内容的情况。 最后,生成的回答中需要包含相关问题,我们将生成三个相关问题。 </think> ### 如何根据iframesrc内容高度设置iframe高度 根据引用内容和技术原理,实现iframe高度自适应需分三步完成: #### 步骤1:基础实现方案 ```html <iframe id="myFrame" src="content.html" style="width:100%; border:none;"></iframe> <script> const iframe = document.getElementById('myFrame'); iframe.onload = function() { try { // 获取内部文档对象(兼容写法) const doc = iframe.contentDocument || iframe.contentWindow.document; // 计算精确高度(解决浏览器兼容性问题) const height = Math.max( doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight ) + 10; // 添加安全边距[^3] // 设置iframe高度 iframe.style.height = height + 'px'; } catch (e) { console.error('高度获取失败:', e.message); } } </script> ``` > **特点**: > - 使用`onload`事件确保内容加载完成后再计算高度[^1][^2] > - 多属性取最大值避免浏览器兼容性问题[^3] > - 添加10px安全边距防止滚动条出现[^2] #### 步骤2:处理跨域限制iframe跨域时,需配合内部页面代码: ```html <!-- 父页面 --> <script> window.addEventListener('message', (event) => { if (event.data.type === 'iframe-height') { document.getElementById('myFrame').style.height = event.data.height + 'px'; } }); </script> <!-- iframe内部页面(content.html) --> <script> window.addEventListener('load', () => { const height = document.documentElement.scrollHeight; window.parent.postMessage({ type: 'iframe-height', height: height }, 'https://父页面域名'); // 指定目标域提升安全性 }); </script> ``` > **安全增强**: > 1. 验证`event.origin`确保消息来源可信 > 2. 避免使用通配符`*`指定目标域[^2] #### 步骤3:动态内容处理 ```javascript // 监听内容变化 function setupHeightObserver(iframe) { const doc = iframe.contentDocument; const observer = new MutationObserver(() => { const newHeight = doc.documentElement.scrollHeight + 10; iframe.style.height = newHeight + 'px'; }); observer.observe(doc.body, { childList: true, // 监控子元素变化 subtree: true, // 监控所有后代元素 characterData: true // 监控文本变化 }); } // 在iframe onload中调用 iframe.onload = function() { // ...原有高度计算代码 setupHeightObserver(iframe); } ``` > **优化点**: > - 使用`MutationObserver`监控DOM变化[^1] > - 结合`requestAnimationFrame`防止频繁重绘 > - 添加防抖机制(动态内容频繁变化时) ### 关键注意要点 1. **初始化处理**: ```javascript // 加载前设置初始高度避免页面跳动 iframe.style.height = "600px"; // 默认高度[^3] iframe.style.overflow = "hidden"; // 隐藏滚动条 ``` 2. **移动端适配**: ```css /* iframe内部页面 */ html, body { overflow-x: hidden; /* 防止横向溢出 */ -webkit-text-size-adjust: 100%; /* 禁用字体缩放 */ } ``` 3. **框架集成示例(Vue)**: ```vue <template> <iframe ref="frame" @load="resizeFrame"/> </template> <script setup> const frame = ref(null); const resizeFrame = () => { const doc = frame.value.contentDocument; frame.value.style.height = doc.body.scrollHeight + 'px'; } </script> ``` > **最佳实践选择指南**: > - 同源场景:直接访问DOM方案(步骤1+动态处理) > - 跨域场景:postMessage方案(步骤2) > - 频繁更新内容:结合MutationObserver(步骤3)[^1][^3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值