近期我投入大量时间和精力于论文开题报告的准备之中，然而手痒难耐，我又重新投身于Web设计工作。这次我遇到了一个颇具挑战性的问题。过去，我在设计Web页面时，主要关注Internet Explorer（IE）的兼容性，很少考虑Firefox，更不用说Chrome了。但现在，我意识到无法兼容Firefox的Web页面就如同粗制滥造的山寨产品一样无法让人接受。我开始注意兼容性问题，并在实践中遇到了一个具体的挑战。
在HTML中，有一个名为的元素，它能在页面中嵌入另一个页面，非常适合用来构建框架页面。例如，一个HTML页面可以分为左右两部分，左边是导航栏，右边是内容展示区。以下是左栏的代码示例：</p> <p>```html</p> <p><IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src="left.html" style="HEIGHT: 100%; width:180px;"></p> <p>```</p> <p>这个代码片段中的iframe会链接到"left.html"页面。对于右栏也是类似的设置。我所设计的页面预览效果如下：现在的问题是，如何使页面更加实用？例如，点击其中的链接能在右栏中显示相应的内容，这显然需要通过JavaScript来实现。</p> <p>原始的、不兼容的方法在此不必多言。要实现这一功能，请遵循以下步骤：</p> <p>1. 首先获取右栏的iframe对象：</p> <p>```javascript</p> <p>var frames = document.getElementById("frameid"); //这里的frameid即右栏iframe的id名</p> <p>```</p> <p>2. 重置其src值以实现页面跳转：</p> <p>```javascript</p> <p>frames.src = pageurl; //这里的pageurl即要显示的目标页面</p> <p>```</p> <p>如果希望调用右栏中的函数，比如名为`right()`的函数，那就不是那么简单了。由于leftframe内嵌在容器页index.html中，因此需要返回到index这一级别并获取rightframe对象：</p> <p>```javascript</p> <p>var frames = window.parent.window.document.getElementById("frameid");</p> <p>```</p> <p>接着，要执行其页面中的函数，必须获得window对象。这里有一个重要的对象`contentWindow`，通过获得这个对象，就可以执行其中的函数了。例如：</p> <p>```javascript</p> <p>frames.contentWindow.right();</p> <p>```</p> <p>以上代码经过测试，兼容IE6、Firefox3以及chrome2.0。虽然还未在IE7上测试，但预计应该也能正常运行。这个方案对于跨浏览器兼容性有很好的表现。希望这个分享能帮助到有同样需求的朋友们。</p> </div> <script>cambrian.render('body')</script> <area ifdisplay id='snjml4'></area><map ifdisplay id='m4zgot'></map><var ifdisplay dropzone='b6jabz'></var><div class="BlLsPLsC6l9LILB imoney"> </div> <sup ifdisplay id='is88vz'></sup><time ifdisplay id='sha5vg'></time><embed ifdisplay name='6rj58c'></embed><div class="pY5FLLxxyeDXf5P nextlog"> 上一篇：<a href='/yuanma/528983.html'>cdr怎么绘制简单的人脸图案-</a> 下一篇：没有了 </div> <var ifdisplay lang='hz2jnh'></var><embed ifdisplay id='inob9z'></embed><area ifdisplay dropzone='29kj2y'></area><div class="eK0oQmBpRnwnGVF link-box"> <h3>网站源码</h3> <ul class="dUyiH2BgHiakWgm ullist4"> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528987.html" title="用js互相调用iframe页面内的js函数">用js互相调用iframe页面内的js函数</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528983.html" title="cdr怎么绘制简单的人脸图案-">cdr怎么绘制简单的人脸图案-</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528982.html" title="Windows10正式版和预览版有什么不同？ 优点多余缺">Windows10正式版和预览版有什么不同？ 优点多余缺</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528974.html" title="用CSS的float和clear属性进行三栏网页布局">用CSS的float和clear属性进行三栏网页布局</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528958.html" title="3dsmax怎么单独移动物体坐标轴并还原-">3dsmax怎么单独移动物体坐标轴并还原-</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528952.html" title="暗影精灵6值得入手吗-暗影精灵6 Air游戏本云评测">暗影精灵6值得入手吗-暗影精灵6 Air游戏本云评测</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528949.html" title="ai怎么设计一系列小仓鼠表情包- ai小仓鼠表情包">ai怎么设计一系列小仓鼠表情包- ai小仓鼠表情包</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528948.html" title="ai打开psd文件图片后色板中的色块没有了怎么办">ai打开psd文件图片后色板中的色块没有了怎么办</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528945.html" title="无法居中,margin-0 auto;属性">无法居中,margin-0 auto;属性</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528940.html" title="Freebsd 下运行 QQ For Linux 的方法">Freebsd 下运行 QQ For Linux 的方法</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528934.html" title="AI怎么设计彩色圆点组成的漩涡图形- ai创意圆点">AI怎么设计彩色圆点组成的漩涡图形- ai创意圆点</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528916.html" title="摄影入门：图文讲解如何分辨手震还是相机走焦">摄影入门：图文讲解如何分辨手震还是相机走焦</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528914.html" title="惠普暗影精灵4 Pro游戏本值得买吗 惠普暗影精灵">惠普暗影精灵4 Pro游戏本值得买吗 惠普暗影精灵</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528869.html" title="CAD怎么绘制建筑平面图- cad平面图的画法">CAD怎么绘制建筑平面图- cad平面图的画法</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528851.html" title="flash怎么导出项目- flash导出FXP项目的教程">flash怎么导出项目- flash导出FXP项目的教程</a></li> <li><i class="yMn2UwGuPxetZru fa fa-caret-right"></i><a href="/yuanma/528844.html" title="CSS背景图片固定宽高比自适应调整的实现方法">CSS背景图片固定宽高比自适应调整的实现方法</a></li> </ul> </div> <small ifdisplay dropzone='9jdy52'></small><bdo ifdisplay date-time='yycbt7'></bdo><ins ifdisplay lang='5ybpc2'></ins><div id="pagenavi"> </div> </div> </div> <ul id="sidebar"> <li class="1BbpzKKpl6kFPOV diyarea"> <script src='/plus/ad_js.php?aid=3' language='javascript'></script> </li> <li class="BUnfIlKUqO403iK rlist1"> <h3><span>金源码搜索</span></h3> <map ifdisplay dropzone='nhffbq'></map><sup ifdisplay dropzone='cjwbdo'></sup><dfn ifdisplay lang='ib66cc'></dfn><div id="logsearch"> <form name="keyform" method="get" action="/plus/search.php"> <input type="hidden" name="pagesize" value="20"> <input name="q" class="8o5rDYWAmZx0rf8 search" type="text" /> <i class="S3Uj4hLucVcPaQi fa fa-search" onclick="$('form').submit()"></i> </form> </div> </li> <li id="blogsort"> <h3 class="2ow6tk2NdMdZeZJ mcolor"><i class="oIQdr05im0CBv1S fa fa-folder-open-o"></i><span>金源码导航</span></h3> </li> <li class="DqBecCFeZzuw6QD rlist1"> <h3><span>免费网站源码</span></h3> <ul id="newlog"> <li><a href="/yuanma/528987.html">用js互相调用iframe页面内的js函数</a></li> <li><a href="/yuanma/528983.html">cdr怎么绘制简单的人脸图案-</a></li> <li><a href="/yuanma/528982.html">Windows10正式版和预览版有什么不同？ 优点多余缺</a></li> <li><a href="/yuanma/528974.html">用CSS的float和clear属性进行三栏网页布局</a></li> <li><a href="/yuanma/528958.html">3dsmax怎么单独移动物体坐标轴并还原-</a></li> </ul> </li> <li class="E6UQD9cX5jBuIgO rlist1"> <h3><span>网站模板下载</span></h3> <ul id="hotlog"> <li><i class='nRZkgbxxzjFxqiX mcolor' >1</i><a href="/yuanma/479878.html">免费的源码好用吗</a></li> <li><i class='nRZkgbxxzjFxqiX mcolor' >2</i><a href="/yuanma/479879.html">企业网站源码：使用企业网站源码搭建网站</a></li> <li><i class='nRZkgbxxzjFxqiX mcolor' >3</i><a href="/yuanma/528278.html">东芝u900超极本怎么样 东芝超级本U900好用吗</a></li> <li><i >4</i><a href="/yuanma/527759.html">3dmax 2011 ProBoolean建模的相关参数设置</a></li> <li><i >5</i><a href="/yuanma/527673.html">当拼车遭遇刷单侵害，看嘀嗒拼车何解</a></li> </ul> </li> <li class="MpyG4TGI2dVCqrK rlist1"> <h3><span>网站建设</span></h3> <ul id="randlog"> <div id='tagd8a8791b4c8d2a83baf443f3ce9eaacb'> <li><a href="/yuanma/481913.html">PHP递归返回值时出现的问题办法</a></li> <li><a href="/yuanma/492285.html">夏普lcd55S3A怎么K歌 夏普lcd55S3A接麦克风插话筒k歌</a></li> <li><a href="/yuanma/492112.html">怎么在win10开始菜单中添加或展出其中的文件夹</a></li> <li><a href="/yuanma/514115.html">ai怎么画纸飞机- ai设计纸飞机形状的教程</a></li> <li><a href="/yuanma/520367.html">css设置各种中文字体如雅黑、黑体、宋体、楷体</a></li> </div> </ul> </li> </ul> </div> </div> <area ifdisplay id='4lv0li'></area><sup ifdisplay date-time='pszhoc'></sup><var ifdisplay lang='xp5qlu'></var><div id="footerbar"> <sup ifdisplay id='yhjsw4'></sup><embed ifdisplay lang='8ynuby'></embed><map ifdisplay dir='q64a9m'></map><div class="KvrG50VJgrTHb5j wrap"> <p>Copyright © 2016-2025 www.dzhlxh.cn <a href="http://www.dzhlxh.cn/" target="_blank">金源码</a> 版权所有 Power by </p> <p>网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板</p> </div> <embed ifdisplay dir='hxkrev'></embed><small ifdisplay name='n43bvk'></small><ins ifdisplay lang='azlibz'></ins><div id="backtop"><span class="A9kzXKcQeidDLBF fa fa-space-shuttle fa-rotate-270"></span></div> </body> </html>
