iframe页面跳转问题_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

iframe页面跳转问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:21 PM

java 框架

有三个页面：aaa.jsp, bbb,jsp, ccc.jsp
aaa页面中有个框架，点击链接的时候框架显示bbb页面
bbb页面也有一个框架，点击链接的时候显示ccc页面
预计结果是在一个窗口中同时显示3个页面的内容。

现在实际结果是，点击第一个页面aaa中的链接时候正常显示bbb的页面，然后继续点击第二个页面bbb中的链接，出现问题，bbb的页面直接刷新了aaa的界面，即在窗口中只显示了bbb的页面

请问要怎么解决？
如果我在下面的bbb.jsp的链接中加入target="rightMain"，在原窗口中是可以实现我要的结果，但是它会额外打开一个显示bbb页面的窗口

如下是aaa.jsp,和bbb.jsp的代码

<script type="text/javascript">	function showDeatil(obj,url){		$("downMain").src=url;	}</script><body onload="">  <!--这是主页面aaa.jsp -->  <div style="width: 100%; height: 10%; float: left;">    <a id="sfcurrent1" href="#" target="downMain" onclick="showDeatil('1','bbb.jsp');">点击链接在下面的iframe中显示子页面</a>  </div>  <div style="overflow: visible; width: 100%; height: 90%; float: left; border-style: outset; border: 0px;">	<iframe style="border: 0px;" width="100%;" height="100%" frameborder="1"		id="downMain" name="rightMain" src=""></iframe>  </div></body>

<script type="text/javascript">	function showDeatil1(obj,url){		$("rightMain").src=url;	}</script><body onload="">  <!--这是第二个子页面bbb.jsp -->  <div style="width: 3%; height: 100%; float: left;">    <a id="sfcurrent1" href="#" target="rightMain" onclick="showDeatil1('1','ccc.jsp');">点击链接在右边的iframe中显示第三个页面</a>  </div>  <div style="overflow: visible; width: 96%; height: 100%; float: left; border-style: outset; border: 0px;">	<iframe style="border: 0px;" width="100%;" height="100%" frameborder="1"		id="rightMain" name="rightMain" src=""></iframe>  </div></body>

回复讨论(解决方案)

function showDeatil(obj,url){
        $("#downMain").get(0).src=url;
    }

function showDeatil1(obj,url){
        $("#rightMain").get(0).src=url;
    }
$是jquery的$撒？
改掉错误，再把target去掉，试试
$ 就是 document.getElementById("downMain")
现在就是两种情况：
没有target的时候，bbb页面会刷新覆盖整个窗口，也就是说在窗口中是显示bbb的页面和Bbb框架中的ccc页面
有target的时候，是能够在一个窗口中正常显示3个页面，但是另外打开一个新的窗口显示bbb和ccc页面

原来是我把iframe的height设置成200%了，iframe把窗口占满了

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。