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簡化開發但需優化冷啟動問題。