链接A通过js加载内容到iframe,链接不显示地址问题,target的用法

a中只要指定href,同时执行target为iframe的id,可同样实现js的效果,并且鼠标放到a上仍然显示链接地址。

这点与form的target原理相同。


                                <div pid="s4" class="submenu" style="height: 26px;display:none;">

                                        <table width="100%">
                                            <tr>
                                                <td align="right" valign="middle" width="50%">
                                                    <img src="image/submenu_arrow.gif" width="11" height="18">
                                                </td>
                                                <td align="left" width="50%">
                                                    <a class="clink" href="javascript:;"
                                                        οnclick="document.getElementById('iframepage_sub').src='xksz_4.htm';">
                                                        校企合作 </a>

                                                </td>
                                            </tr>
                                            <tr><td height="1" bgcolor="#bec6ca" colspan="2"></td></tr>
                                        </table>

                                </div>       


                                <div pid="s4" class="submenu" style="height: 26px;display:none;">
                                        <table width="100%">
                                            <tr>
                                                <td align="right" valign="middle" width="50%">
                                                    <img src="image/submenu_arrow.gif" width="11" height="18">
                                                </td>
                                                <td align="left" width="50%">
                                                     <a class="clink" href="xksz_4.htm" target="iframepage_sub"
                                                        οnclick="">
                                                        在线报名 </a>

                                                </td>
                                            </tr>
                                            <tr><td height="1" bgcolor="#bec6ca" colspan="2"></td></tr>
                                        </table>
                                </div>                                                                                                                                                        
                            </td>

                        </tr>   


<iframe id="iframepage_sub" name="iframepage_sub"
                        src="xygk_xxjj.htm" frameBorder=0 scrolling=no width="730px"
                        onLoad="iframeautoheight_childframe(this.id,'iframepage');"></iframe>

<think>嗯,用户遇到了iframe在动态加载内容后高度适应导致显示全的问题。首先,我需要回想一下常见的解决方案。记得以前iframe的高度自适应通常需要JavaScript来动态调整。用户提供的引用里有一个函数iframeLoad,它在加载完成后设置iframe的高度为内容的高度。过,可能还有一些细节需要注意,比如跨域问题或者内容动态变化时的实时调整。 首先,基本的方法应该是通过获取iframe内部文档的scrollHeight来设置外部iframe的高度。但跨域的情况下,浏览器会阻止访问contentWindow.document,这时候可能需要使用postMessage进行通信。另外,如果内容是通过JavaScript动态加载的,比如Ajax或者SPA框架,可能需要监听DOM变化或者使用MutationObserver来触发高度调整。 接下来,用户可能需要具体的代码示例。比如在父页面定义调整高度的函数,并在iframe加载完成后调用。同时,考虑使用MutationObserver来监测内容变化,实时调整高度。对于跨域的情况,需要在iframe内部和父页面都添加postMessage的监听和发送逻辑。 然后,还需要提醒用户注意跨域的限制,以及可能出现的性能问题,比如频繁调整高度导致页面卡顿。可能建议使用防抖函数来优化性能。此外,现代浏览器可能对某些方法有兼容性问题,需要检查兼容性或者使用polyfill。 总结下来,解决方案应该包括:基本JavaScript调整方法、跨域处理、动态内容监听、性能优化以及兼容性注意事项。这些步骤应该分点说明,并提供示例代码,帮助用户逐步实现iframe的高度自适应。</think>### 解决方案:iframe动态内容高度自适应 #### 1. 基础JavaScript方法 通过监听iframe加载事件,动态获取内容高度并设置父容器高度。这是兼容性较好的基础方案: ```javascript function adjustIframeHeight() { const iframe = document.getElementById('iframe'); try { const contentHeight = iframe.contentWindow.document.body.scrollHeight; iframe.style.height = contentHeight + 'px'; } catch (e) { console.log('跨域访问受限,需使用postMessage方案'); } } // 初始加载监听 document.getElementById('iframe').onload = adjustIframeHeight; // 动态内容变化监听(需同域) const observer = new MutationObserver(adjustIframeHeight); observer.observe(iframe.contentWindow.document.body, { subtree: true, childList: true, attributes: true }); ``` [^1] #### 2. 跨域解决方案 当iframe内容来自同域时,需双方配合使用postMessage: ```html <!-- 父页面 --> <script> window.addEventListener('message', (e) => { if (e.data.type === 'resize') { document.getElementById('iframe').style.height = e.data.height + 'px'; } }); </script> <!-- 子页面 --> <script> window.addEventListener('load', () => { const height = document.body.scrollHeight; window.parent.postMessage({ type: 'resize', height }, '*'); }); // 动态内容变化检测 new MutationObserver(() => { window.parent.postMessage({ type: 'resize', height: document.body.scrollHeight }, '*'); }).observe(document.body, { subtree: true, childList: true }); </script> ``` #### 3. 现代浏览器优化方案 使用ResizeObserver API实现高性能监听(Chrome 64+/Firefox 69+): ```javascript const iframe = document.querySelector('iframe'); const resizeObserver = new ResizeObserver(entries => { const height = entries[0].target.scrollHeight; iframe.style.height = `${height}px`; }); iframe.onload = () => { try { resizeObserver.observe(iframe.contentDocument.body); } catch (e) { console.error('跨域访问受限'); } }; ``` #### 注意事项 1. **跨域限制**:非同源iframe需双方配合设置`document.domain`或使用postMessage 2. **性能优化**:对频繁变化的内容建议使用防抖函数 3. **CSS兼容**:在iframe内部确保设置`body { margin: 0 }`避免高度计算误差 4. **框架适配**:对React/Vue等框架,应在mounted/updated生命周期触发高度计算
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值