zoukankan      html  css  js  c++  java
  • ajax+div 代替iframe 学习尝试

    工作的时候遇到了所谓html内多tab展示的情况,主要是通过iframe来关联子页面;

    不过也不知道从何时开始记得是说iframe不建议多用,所以想想,还是找找有没有其他方法(不应用于工作);

    先说下关于用iframe的感觉吧,第一次尝试实际应用,iframe都有至少一个form在里面,而且主页面是为了做关于一个tab提交form之后提示并切换到下一个tab,主页面负责加载了tab的源地址即xxx.jsp ,那么当时的做法时,iframe提交后javascript调用父页面的js方法实现tab切换,好在工作上用的是ie(为什么我反倒觉得恶心),通过如下:

    //iframe里js
    function pageNext(param){
      window.parent.pageNext(param);  
    }
    //父页面里的js
    function pageNext(){
      alert("孩子,你居然召唤了父亲大人我的魔力了//魔王奶爸看多了");
      //自行实现    
    }

    不过这样的父子页面调用,貌似在webkit下似乎报错了,难道因为这样所以才说尽量别用。

    好了,说回正题,当时我就咨询了下其他人,有没有不用iframe的做法,刚好他们也在研究,查看了一下网上资料。

    通过在主页面设置div,触发tab页面的内容放置于div中,实际代码如下:

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Home</title>
    <script type="text/javascript" src="js/functionOfTab.js">
    //既然ajax的方式加载的js无法调用,那么可以通过使用主页面嵌入js,这样的话可能要考虑js与view的分离,其实也是不错的
    </script> <script type="text/javascript"> function loadDiv(){ //隐藏了加载的文件地址 var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; xmlhttp.open("GET","./ajax.do",true); xmlhttp.send(); } function loadDiv1(){ //直接加载文件,但这样就暴露了加载的url var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; xmlhttp.open("GET","./tab.html",true); xmlhttp.send(); } </script> </head> <body> <form name="testForm" action="./f.do"> <input type="submit" value="跳转"/> </form> <div><input type="button" value="load" onclick="loadDiv();" /> <input type="button" value="load file" onclick="loadDiv1();" /></div> <div id="myDiv"></div> </body> </html>

    tab.jsp

    <script type="text/javascript">
        function test(){//后加载是无法调用到的
            alert("whatt?");
        }
    </script>
    
    <input type="button"  value="dede"  onclick="test();" />
    
  • 相关阅读:
    蓝桥网试题 java 基础练习 特殊的数字
    蓝桥网试题 java 基础练习 杨辉三角形
    蓝桥网试题 java 基础练习 查找整数
    蓝桥网试题 java 基础练习 数列特征
    蓝桥网试题 java 基础练习 字母图形
    蓝桥网试题 java 基础练习 01字串
    蓝桥网试题 java 基础练习 回文数
    蓝桥网试题 java 基础练习 特殊回文数
    Using text search in Web page with Sikuli
    each of which 用法
  • 原文地址:https://www.cnblogs.com/dont27/p/3634230.html
Copyright © 2011-2022 走看看