zoukankan      html  css  js  c++  java
  • iframe之局部刷新

     

    例如: <iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe> 

    方案一:用iframe的name属性定位 
    <input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()"> 
    或 
    <input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()"> 

    方案二:用iframe的id属性定位 
    <input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()"> 

    方案三:当iframe的src为其它网站地址(跨域操作时) 
    <input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')">

    方案四:通过和替换iframe的src来实现局部刷新 
    可以用document.getElementById("iframname").src=""来进行iframe得重定向; 

    >>>>>test.html>>>>>>>>>>> 
    <html> 
    <head> 
       <title>iframe test</title> 
       <script type="text/javascript"> 
        function partRefresh() { 
        document.getElementById("iframe1Id").src="2.html";   // 方法一: 通过和替换iframe的src来实现局部刷新 
        } 
       </script> 
    </head> 
    <body> 
       <table border="1" width="90%" align="center"> 
        <tr style="background:#F0F0E4"> 
         <td>方格1</td> 
         <td>方格2</td> 
         <td>方格3</td> 
        </tr> 
        <tr> 
         <td><iframe src="1.html" id="iframe1Id" name="iframe1Name" width="100%"></iframe></td> 
         <td><iframe src="2.html" id="iframe2Id" name="iframe2Name" width="100%"></iframe></td> 
         <td><iframe src="3.html" id="iframe3Id" name="iframe3Name" width="100%"></iframe></td> 
        </tr> 
       </table><br><br> 
       <input type="button" value="IFRAME局部刷新" style="margin-left:70px;" onclick="partRefresh();"> 
    </body> 
    </html> 

    >>>>>1.html>>>>>>>>>>> 
    <table border="1" width="90%" align="center"> 
    <tr style="background:#F0F0E4"> 
       <td>1-方格1</td> 
       <td>1-方格2</td> 
       <td>1-方格3</td> 
    </tr> 
    </table> 

    >>>>>2.html>>>>>>>>>>> 
    <table border="1" width="90%" align="center"> 
    <tr style="background:#F0F0E4"> 
       <td>2-方格1</td> 
       <td>2-方格2</td> 
       <td>2-方格3</td> 
    </tr> 
    </table> 

    >>>>>3.html>>>>>>>>>>> 
    <table border="1" width="90%" align="center"> 
    <tr style="background:#F0F0E4"> 
       <td>3-方格1</td> 
       <td>3-方格2</td> 
       <td>3-方格3</td> 
    </tr> 
    </table> 

  • 相关阅读:
    LeetCode15 3Sum
    LeetCode10 Regular Expression Matching
    LeetCode20 Valid Parentheses
    LeetCode21 Merge Two Sorted Lists
    LeetCode13 Roman to Integer
    LeetCode12 Integer to Roman
    LeetCode11 Container With Most Water
    LeetCode19 Remove Nth Node From End of List
    LeetCode14 Longest Common Prefix
    LeetCode9 Palindrome Number
  • 原文地址:https://www.cnblogs.com/baiduligang/p/4247348.html
Copyright © 2011-2022 走看看