学习HTML:iframe用法总结收藏

2023-11-16

原文地址:http://blog.csdn.net/andycode/article/details/6899775


  分类:
 
Html代码  复制代码  收藏代码
  1. <P><iframe>是框架的一种形式,也比较常用到。 </P><DIV class=blogstory><P><SPAN style="FONT-SIZE: large"><SPAN style="COLOR: #0000ff"><SPAN style="FONT-SIZE: medium">一:几个例子——演示iframe的基本用法</SPAN></SPAN></SPAN></P></DIV>  
[html]  view plain  copy
  1. <p><iframe>是框架的一种形式,也比较常用到。 </p><div class="blogstory"><p><span style="font-size:18px;"><span style="color:#0000ff;"><span style="font-size:16px;">一:几个例子——演示iframe的基本用法</span></span></span></p></div>  
Html代码  复制代码  收藏代码
  1. 例1:   
  2. <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>  
  3. 不用多说了,iframe的各个属性含义如下:   
  4. width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;   
  5. 注意:URL建议用绝对路径;传说中百DU用:<iframe width=0 height=0 frameborder=0 scrolling=auto src="WWW" mce_src="WWW" .webjx.com></iframe><br />黑了88*8。。。   
  6. 例2:   
  7. 如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定).   
  8. <iframe name=**  ></iframe>  
  9. 然后在修改默认打开模式,:网页HEAD中加上<a href="URL" mce_href="URL" target=**>或部分连接的目标框架设为(**).   
  10. 例3:   
  11. 要插入一个页面。要求只拿中间一部分。其他的都不要,代码如下:   
  12. <iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="<a href=" mce_src="<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/"><span style="color: #0000ff;" mce_style="color: #0000ff;"><span style="text-decoration: underline;" mce_style="text-decoration: underline;">http://www.webjx.com/</span></span></a>"  frameborder=no scrolling=no  width=776  height=2500></iframe>  
  13. 控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170    
  14. scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。   
  15. 例4:   
  16.     1、页面内加入iframe   
  17. <iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>,   
  18. scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。   
  19.   2、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src="http://www.cctv.com" mce_src="http://www.cctv.com"></iframe>,然后,网页上的超链接语句应该写为:<a  href="URL" mce_href="URL" target=aa>  
  20.   3、如果把frameborder设为1,效果就像文本框一样   
  21.   透明的IFRAME的用法   
  22.   必需IE5.5以上版本才支持   
  23.   在transparentBody.htm文件的<body>标签中,我已经加入了style="background- color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:   
  24. <IFRAME ID="Frame1" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true"></IFRAME>  
  25. <IFRAME ID="Frame2" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>  
  26. <IFRAME ID="Frame3" SRC="transparentBody.htm" mce_SRC="transparentBody.htm"></IFRAME>  
  27. <IFRAME ID="Frame4" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>
二:(难点)设置iframe框架的背景色
Java代码  复制代码  收藏代码
  1. a.htm     
  2.   <mce:script type="text/javascript"><!--   
  3.      
  4.   function   setBG(){     
  5.   var   strColor=document.bgColor;     
  6.   frm.document.bgColor=strColor;     
  7.   }     
  8.      
  9. // --></mce:script>     
  10.   <body   style="background-color:red" mce_style="background-color:red"   οnlοad='setBG()'>     
  11.   <iframe   src="about:blank" mce_src="about:blank"   name=frm></iframe>

三:(难点)窗口与浮动帧之间的相互控制

Html代码  复制代码  收藏代码
  1. 在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。   
  2.       1、在父窗体中访问并控制子窗体中的对象   
  3.   在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。   
  4.   现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。   
  5.   比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:   
  6.   <Iframe src="test.htm" mce_src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  7.     test.htm文件代码为:   
  8.   <html>  
  9.    <body>  
  10.     <h1 id="myH1">hello,my boy</h1>  
  11.    </body>  
  12.   </html>  
  13.   如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:   
  14.   document.myH1.innerText="hello,my dear"(其中,document可省)   
  15.   在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。   
  16.       2、在子窗体中访问并控制父窗体中对象   
  17.   在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。   
  18.   如example.htm:   
  19.   <html>  
  20.    <body onclick="alert(tt.myH1.innerHTML)">  
  21.     <Iframe name="tt" src="frame1.htm" mce_src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  22.     <h1 id="myH2">hello,my wife</h1>  
  23.    </body>  
  24.   </html>  
  25.   如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:   
  26.   parent.myH2.innerText="hello,my friend"  
  27.     或者parent.document.getElementById("myH2").innerText="hello,my friend"  
  28.   这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。   
  29.            
  30.         3:frame的一个子元素访问frame的另一个子元素   
  31.     例如:框架文件frame.html中嵌入了另外两个html文件   
  32.     <div styleClass="basewnd">    
  33.  <!-- 搜索 -->  
  34.  <div id="search" name="test" align="center" class="top_list_home">  
  35.   <iframe id="frameSearch" name="search" src="Search.html" mce_src="Search.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
  36.  </div>  
  37. <!-- 单位目录树 -->  
  38.  <div align="center" class="welcome_tag_home">  
  39.   <iframe src="DirectoryTree.html" mce_src="DirectoryTree.html"  frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>    
  40.  </div>  
  41.   </div>  
  42. 那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性,则可以这样:   
  43. alert(parent.document.search.section.innerHTML),其中search是“搜索”div的id,或者:   
  44. alert(parent.document.getElementById("search").section.innerHTML),   
  45. 或者也可以这样:   
  46. alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)   
  47. 但是以上这些方法都不怎么好用,因为iframe不是标准HTML标签,因此这些方法总是时不时地失灵,因此最好使用下面的方法:   
  48.                                         obj = parent.document.getElementById("frameSearch").contentWindow   
  49.                     objobj=obj.document.getElementById("section")   
  50.                                         obj.innerHTML="大家好!"  
  51. 这种方法屡试不爽,关于具体的介绍,见下面的第四节(用JS访问操作iframe里的dom完全攻略!)   
  52.   Iframe虽然内嵌在另一个HTML文件中,但它保持相对的独立,是一个“独立王国“哟,在单一HTML中的特性同样适用于浮动帧中。试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。   
  53.         4:最适用的iframe内部和外部元素的访问方法(在各个浏览器中都适用,并且不会失灵,而上面介绍的那些方法中,很多用过一两次后就失灵了)   
  54.      请见下一个文本框。    
[html]  view plain  copy
  1. 在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。  
  2.       1、在父窗体中访问并控制子窗体中的对象  
  3.   在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。  
  4.   现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。  
  5.   比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:  
  6.   <Iframe src="test.htm" mce_src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  7.     test.htm文件代码为:  
  8.   <html>  
  9.    <body>  
  10.     <h1 id="myH1">hello,my boy</h1>  
  11.    </body>  
  12.   </html>  
  13.   如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:  
  14.   document.myH1.innerText="hello,my dear"(其中,document可省)  
  15.   在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。  
  16.       2、在子窗体中访问并控制父窗体中对象  
  17.   在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。  
  18.   如example.htm:  
  19.   <html>  
  20.    <body onclick="alert(tt.myH1.innerHTML)">  
  21.     <Iframe name="tt" src="frame1.htm" mce_src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>  
  22.     <h1 id="myH2">hello,my wife</h1>  
  23.    </body>  
  24.   </html>  
  25.   如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:  
  26.   parent.myH2.innerText="hello,my friend"  
  27.     或者parent.document.getElementById("myH2").innerText="hello,my friend"  
  28.   这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。  
  29.           
  30.         3:frame的一个子元素访问frame的另一个子元素  
  31.     例如:框架文件frame.html中嵌入了另外两个html文件  
  32.     <div styleClass="basewnd">   
  33.  <!-- 搜索 -->  
  34.  <div id="search" name="test" align="center" class="top_list_home">  
  35.   <iframe id="frameSearch" name="search" src="Search.html" mce_src="Search.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>   
  36.  </div>  
  37. <!-- 单位目录树 -->  
  38.  <div align="center" class="welcome_tag_home">  
  39.   <iframe src="DirectoryTree.html" mce_src="DirectoryTree.html"  frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>   
  40.  </div>  
  41.   </div>  
  42. 那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性,则可以这样:  
  43. alert(parent.document.search.section.innerHTML),其中search是“搜索”div的id,或者:  
  44. alert(parent.document.getElementById("search").section.innerHTML),  
  45. 或者也可以这样:  
  46. alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)  
  47. 但是以上这些方法都不怎么好用,因为iframe不是标准HTML标签,因此这些方法总是时不时地失灵,因此最好使用下面的方法:  
  48.                                         obj = parent.document.getElementById("frameSearch").contentWindow  
  49.                     obj=obj.document.getElementById("section")  
  50.                                         obj.innerHTML="大家好!"  
  51. 这种方法屡试不爽,关于具体的介绍,见下面的第四节(用JS访问操作iframe里的dom完全攻略!)  
  52.   Iframe虽然内嵌在另一个HTML文件中,但它保持相对的独立,是一个“独立王国“哟,在单一HTML中的特性同样适用于浮动帧中。试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。  
  53.         4:最适用的iframe内部和外部元素的访问方法(在各个浏览器中都适用,并且不会失灵,而上面介绍的那些方法中,很多用过一两次后就失灵了)  
  54.      请见下一个文本框。    

 

 

四:(重重之点)用JS访问操作iframe里的dom完全攻略!

Java代码  复制代码  收藏代码
  1. 两个页面,一个页面是iframe所在页面(页面名称:iPage.html),另一个页面是iframe属性src指向页面(页面名称:srcPage.html)。   
  2. iPage.html,<body>里dom:   
  3. <iframe id=“iId“ name=“iName“ src="“srcPage.html“" mce_src="“srcPage.html“" scrolling=“no“ frameborder=“0“></iframe>   
  4. srcPage.html,<body>里dom:   
  5. <h1>妹妹的一天</h1>    
  6. <p>早上吃早点,中午约会吃饭,下午K歌,晚上和哥哥瞎折腾</p>   
  7. 下面讨论ie下JS是怎么操作以上两个页面,再讨论firefox的做法,最后给出兼容ie,firefox浏览器操作iframe对象的方法。   
  8. 一、ie下访问操作iframe里内容   
  9. 大家都知道iframe是非标准html标签,它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话,嘿嘿)   
  10. 1. ie通过document.frames["IframeName"]获取它,例子:我们在iPage.html里输出srcPage.html里h1的内容,JS如下,firefox下document.frames 没有定义错误提示:   
  11. window.onload = (function () {    
  12.   alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});   
  13. 2. ie另一种方法contentWindow获取它,代码:    
  14. window.onload = (function () {    
  15.  var iObj = document.getElementById(‘iId‘).contentWindow;   
  16.  alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);   
  17. });   
  18. 此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过,好事啊!嘿嘿。(网上一查,发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞,有脚本注入攻击的危险。   
  19. 后来听说可以在后台防止这样的事情发生,算是松了口气。不过还是希望firefox新版本可以解决这样的危险。)   
  20. 3.改变srcPage.html里h1标题内容,代码:   
  21. iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;   
  22. 通过contentWindow后访问里面的节点就和以前一样了。   
  23. 二、firefox下访问操作iframe里内容   
  24. Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准可以少写一个document,代码:   
  25. var iObj = document.getElementById(‘iId‘).contentDocument;    
  26. alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);    
  27. alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);   
  28. 兼容这两种浏览器的方法,现在也出来了,就是使用contentWindow这个方法。   
  29. 嘿嘿!操作iframe是不是可以随心所欲了呢?如果还觉得不爽,你甚至可以重写iframe里的内容。   
  30. 三、重写iframe里的内容   
  31. 通过designMode(设置文档为可编辑设计模式)和contentEditable(设置内容为可编辑),你可以重写iframe里的内容。代码:   
  32. var iObj = document.getElementById(‘iId‘).contentWindow;   
  33. iObj.document.designMode = ‘On‘;    
  34. iObj.document.contentEditable = true;    
  35. iObj.document.open();    
  36. iObj.document.writeln(‘<html><head>‘);    
  37. iObj.document.writeln(‘<mce:style><!--   
  38. body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}   
  39. --></mce:style><style mce_bogus="1">body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);    
  40. iObj.document.writeln(‘</head><body></body></html>‘);    
  41. iObj.document.close();   
  42. 这两个对象的资料可参考:http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx  
  43. 四、iframe自适应高度   
  44. 有了上面的原理要实现这个相当简单,就是把iframe的height值设置成它里面文档的height值就可以。代码:   
  45. window.onload = (function () {    
  46. var iObj = document.getElementById(‘iId‘);    
  47. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;});   
  48. 现在对JS操作iframe你已经有了全新的认识,说不定那天会因为这个有什么新的web技术名词,嘿嘿,臭美下!   
  49. PS:   
  50. 1. Document.designMode ,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必要设置这个属性!   
  51. 2. 另外之所以要用 window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段js的时候iframe里的dom都还没加载到,这样自然是无输出的了   
  52. 3. 如果是在两个不同的子域下,上面的代码需要做小的改动。   
  53. 调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码,指明同一个根域即可。   
  54. 参考资料:   
  55. https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla  
  56. http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx  
  57. http://www.kuqin.com/webpagedesign/20080516/8536.html  
  58. http://www.nohack.cn/jsj/safe/2006-10-05/8156.html  
  59. 此外,用DOM方法与jquery方法结合的方式:   
  60. 1.在父窗口中操作 选中IFRAME中的所有单选钮   
  61. $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");   
  62. 2.在IFRAME中操作 选中父窗口中的所有单选钮   
  63. $(window.parent.document).find("input[@type='radio']").attr("checked","true");   
  64. iframe框架的:<iframe src="test.html" mce_src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>   
  65. 3.Try this:    
  66. $("#myid", top.document);    
  67. the top.document tells the selector to target the myid element which    
  68. exists in the topmost document (your parent page).  In order for this    
  69. to work, jquery must be loaded in the file which is viewed through the    
  70. iframe.    
  71. 我的代码   
  72. $('#parentElem', top.document).append('<div class="imgbox" id="imgbox"><img class="img" src="pp.png" mce_src="pp.png" id="img"></div>');   
  73. --end--  
[java]  view plain  copy
  1. 两个页面,一个页面是iframe所在页面(页面名称:iPage.html),另一个页面是iframe属性src指向页面(页面名称:srcPage.html)。  
  2. iPage.html,<body>里dom:  
  3. <iframe id=“iId“ name=“iName“ src="“srcPage.html“" mce_src="“srcPage.html“" scrolling=“no“ frameborder=“0“></iframe>  
  4. srcPage.html,<body>里dom:  
  5. <h1>妹妹的一天</h1>   
  6. <p>早上吃早点,中午约会吃饭,下午K歌,晚上和哥哥瞎折腾</p>  
  7. 下面讨论ie下JS是怎么操作以上两个页面,再讨论firefox的做法,最后给出兼容ie,firefox浏览器操作iframe对象的方法。  
  8. 一、ie下访问操作iframe里内容  
  9. 大家都知道iframe是非标准html标签,它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话,嘿嘿)  
  10. 1. ie通过document.frames["IframeName"]获取它,例子:我们在iPage.html里输出srcPage.html里h1的内容,JS如下,firefox下document.frames 没有定义错误提示:  
  11. window.onload = (function () {   
  12.   alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);});  
  13. 2. ie另一种方法contentWindow获取它,代码:   
  14. window.onload = (function () {   
  15.  var iObj = document.getElementById(‘iId‘).contentWindow;  
  16.  alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);  
  17. });  
  18. 此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过,好事啊!嘿嘿。(网上一查,发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞,有脚本注入攻击的危险。  
  19. 后来听说可以在后台防止这样的事情发生,算是松了口气。不过还是希望firefox新版本可以解决这样的危险。)  
  20. 3.改变srcPage.html里h1标题内容,代码:  
  21. iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;  
  22. 通过contentWindow后访问里面的节点就和以前一样了。  
  23. 二、firefox下访问操作iframe里内容  
  24. Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准,通过标准可以少写一个document,代码:  
  25. var iObj = document.getElementById(‘iId‘).contentDocument;   
  26. alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);   
  27. alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);  
  28. 兼容这两种浏览器的方法,现在也出来了,就是使用contentWindow这个方法。  
  29. 嘿嘿!操作iframe是不是可以随心所欲了呢?如果还觉得不爽,你甚至可以重写iframe里的内容。  
  30. 三、重写iframe里的内容  
  31. 通过designMode(设置文档为可编辑设计模式)和contentEditable(设置内容为可编辑),你可以重写iframe里的内容。代码:  
  32. var iObj = document.getElementById(‘iId‘).contentWindow;  
  33. iObj.document.designMode = ‘On‘;   
  34. iObj.document.contentEditable = true;   
  35. iObj.document.open();   
  36. iObj.document.writeln(‘<html><head>‘);   
  37. iObj.document.writeln(‘<mce:style><!--  
  38. body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}  
  39. --></mce:style><style mce_bogus="1">body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);   
  40. iObj.document.writeln(‘</head><body></body></html>‘);   
  41. iObj.document.close();  
  42. 这两个对象的资料可参考:http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx  
  43. 四、iframe自适应高度  
  44. 有了上面的原理要实现这个相当简单,就是把iframe的height值设置成它里面文档的height值就可以。代码:  
  45. window.onload = (function () {   
  46. var iObj = document.getElementById(‘iId‘);   
  47. iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;});  
  48. 现在对JS操作iframe你已经有了全新的认识,说不定那天会因为这个有什么新的web技术名词,嘿嘿,臭美下!  
  49. PS:  
  50. 1. Document.designMode ,Document.contentEditable在你这里的使用场景错了,他一般是应用在在线编辑器上的,如果你并不是开放给用户操作的话,根本没必要设置这个属性!  
  51. 2. 另外之所以要用 window.onload,是因为页面加载中,iframe的加载顺序是在最后的,也就是说,在没用window.onload的情况下,在执行你那段js的时候iframe里的dom都还没加载到,这样自然是无输出的了  
  52. 3. 如果是在两个不同的子域下,上面的代码需要做小的改动。  
  53. 调用iframe的页面和被iframe的页面需要增加设置 document.domain 的代码,指明同一个根域即可。  
  54. 参考资料:  
  55. https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla  
  56. http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx  
  57. http://www.kuqin.com/webpagedesign/20080516/8536.html  
  58. http://www.nohack.cn/jsj/safe/2006-10-05/8156.html  
  59. 此外,用DOM方法与jquery方法结合的方式:  
  60. 1.在父窗口中操作 选中IFRAME中的所有单选钮  
  61. $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");  
  62. 2.在IFRAME中操作 选中父窗口中的所有单选钮  
  63. $(window.parent.document).find("input[@type='radio']").attr("checked","true");  
  64. iframe框架的:<iframe src="test.html" mce_src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>  
  65. 3.Try this:   
  66. $("#myid", top.document);   
  67. the top.document tells the selector to target the myid element which   
  68. exists in the topmost document (your parent page).  In order for this   
  69. to work, jquery must be loaded in the file which is viewed through the   
  70. iframe.   
  71. 我的代码  
  72. $('#parentElem', top.document).append('<div class="imgbox" id="imgbox"><img class="img" src="pp.png" mce_src="pp.png" id="img"></div>');  
  73. --end--  

 

 

五:用图片代替iframe的滚动条

Java代码  复制代码  收藏代码
  1. <IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" mce_src="bgm/bgm.html" width=300></IFRAME>   
  2. 用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓应该怎么实现呢?   
  3. 回答:用下列代码替换网页的<title>..</title>   
  4. <SCRIPT LANGUAGE="javascript">   
  5. function scroll(n)   
  6. {temp=n;   
  7. Out1.scrollTop=Out1.scrollTop+temp;   
  8. if (temp==0return;   
  9. setTimeout("scroll(temp)",80);   
  10. }   
  11. </SCRIPT>   
  12. <TABLE WIDTH="330">   
  13. <TR>   
  14. <TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >   
  15. <DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;" mce_STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">   
  16. 文字<BR> 文字<BR>   
  17. 文字<BR>   
  18. 文字<BR>   
  19. 文字   
  20. <BR>   
  21. <BR>   
  22. </DIV>   
  23. </TD>   
  24. <TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" mce_SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" οnmοuseοver="scroll(-1)" οnmοuseοut="scroll(0)" οnmοusedοwn="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快!"></TD>   
  25. </TR>   
  26. <TR>   
  27. <TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" mce_SRC="photo/down0605.gif" οnmοuseοver="scroll(1)" οnmοuseοut="scroll(0)"      οnmοusedοwn="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快!"></TD>   
  28. </TR>   
  29. </TABLE>   
  30. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::   
  31. 下面这段代码可以实现IFrame自适应高度,即随着页面的长度,自动适应以免除页面和IFrame同时出现滚动条。   
  32. 源代码如下:   
  33. <mce:script type="text/javascript"><!--   
  34. //** iframe自动适应页面 **//   
  35. //输入你希望根据页面高度自动调整高度的iframe的名称的列表   
  36. //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。  
  37. //定义iframe的ID   
  38. var iframeids=["test"]   
  39. //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  
  40. var iframehide="yes"  
  41. function dyniframesize()   
  42. {   
  43. var dyniframe=new Array()   
  44. for (i=0; i<iframeids.length; i++)   
  45. {   
  46. if (document.getElementById)   
  47. {   
  48. //自动调整iframe高度   
  49. dyniframe[dyniframe.length] = document.getElementById(iframeids);   
  50. if (dyniframe && !window.opera)   
  51. {   
  52. dyniframe.style.display="block"  
  53. if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape  
  54. dyniframe.height = dyniframe.contentDocument.body.offsetHeight;   
  55. else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE  
  56. dyniframe.height = dyniframe.Document.body.scrollHeight;   
  57. }   
  58. }   
  59. //根据设定的参数来处理不支持iframe的浏览器的显示问题   
  60. if ((document.all || document.getElementById) && iframehide=="no")   
  61. {   
  62. var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)   
  63. tempobj.style.display="block"  
  64. }   
  65. }   
  66. }   
  67. if (window.addEventListener)   
  68. window.addEventListener("load", dyniframesize, false)   
  69. else if (window.attachEvent)   
  70. window.attachEvent("onload", dyniframesize)   
  71. else  
  72. window.οnlοad=dyniframesize   
  73. // --></mce:script>  
[java]  view plain  copy
  1. <IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" mce_src="bgm/bgm.html" width=300></IFRAME>  
  2. 用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓应该怎么实现呢?  
  3. 回答:用下列代码替换网页的<title>..</title>  
  4. <SCRIPT LANGUAGE="javascript">  
  5. function scroll(n)  
  6. {temp=n;  
  7. Out1.scrollTop=Out1.scrollTop+temp;  
  8. if (temp==0return;  
  9. setTimeout("scroll(temp)",80);  
  10. }  
  11. </SCRIPT>  
  12. <TABLE WIDTH="330">  
  13. <TR>  
  14. <TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >  
  15. <DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;" mce_STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;">  
  16. 文字<BR> 文字<BR>  
  17. 文字<BR>  
  18. 文字<BR>  
  19. 文字  
  20. <BR>  
  21. <BR>  
  22. </DIV>  
  23. </TD>  
  24. <TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" mce_SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" οnmοuseοver="scroll(-1)" οnmοuseοut="scroll(0)" οnmοusedοwn="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快!"></TD>  
  25. </TR>  
  26. <TR>  
  27. <TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" mce_SRC="photo/down0605.gif" οnmοuseοver="scroll(1)" οnmοuseοut="scroll(0)"      οnmοusedοwn="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快!"></TD>  
  28. </TR>  
  29. </TABLE>  
  30. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  
  31. 下面这段代码可以实现IFrame自适应高度,即随着页面的长度,自动适应以免除页面和IFrame同时出现滚动条。  
  32. 源代码如下:  
  33. <mce:script type="text/javascript"><!--  
  34. //** iframe自动适应页面 **//  
  35. //输入你希望根据页面高度自动调整高度的iframe的名称的列表  
  36. //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。  
  37. //定义iframe的ID  
  38. var iframeids=["test"]  
  39. //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  
  40. var iframehide="yes"  
  41. function dyniframesize()  
  42. {  
  43. var dyniframe=new Array()  
  44. for (i=0; i<iframeids.length; i++)  
  45. {  
  46. if (document.getElementById)  
  47. {  
  48. //自动调整iframe高度  
  49. dyniframe[dyniframe.length] = document.getElementById(iframeids);  
  50. if (dyniframe && !window.opera)  
  51. {  
  52. dyniframe.style.display="block"  
  53. if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape  
  54. dyniframe.height = dyniframe.contentDocument.body.offsetHeight;  
  55. else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE  
  56. dyniframe.height = dyniframe.Document.body.scrollHeight;  
  57. }  
  58. }  
  59. //根据设定的参数来处理不支持iframe的浏览器的显示问题  
  60. if ((document.all || document.getElementById) && iframehide=="no")  
  61. {  
  62. var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)  
  63. tempobj.style.display="block"  
  64. }  
  65. }  
  66. }  
  67. if (window.addEventListener)  
  68. window.addEventListener("load", dyniframesize, false)  
  69. else if (window.attachEvent)  
  70. window.attachEvent("onload", dyniframesize)  
  71. else  
  72. window.οnlοad=dyniframesize  
  73. // --></mce:script>  

 

六:iframe属性

属性 值 描述 DTD 
align left 
right 
top 
middle 
bottom 
 规定如何根据周围的文本来排列此框架。 TF 
frameborder 1 

 规定是否显示框架的边框。 TF 
height pixels 

 定义 iframe 的高度。 TF 
longdesc URL 描述此框架内容的长描述的URL。 TF 
marginheight pixels 定义 iframe 的顶部和底部的边距。 TF 
marginwidth pixels 定义 iframe 的左侧和右侧的边距。 TF 
name frame_name 规定 iframe 的唯一名称 (以便在脚本中使用)。 TF 
scrolling yes 
no 
auto 
 定义滚动条。 TF 
src URL 在 iframe 中显示文档的 URL。 TF 
width pixels 

 定义 iframe 的宽度。 TF

 

 

七:本人项目部分代码参考

Java代码  复制代码  收藏代码
  1. 以下是本人自己在实际项目开发时利用frame写的一段源代码,仅供参考:   
  2. 主文件(框架):   
  3. <html>   
  4. <head>   
  5.  <title>教育局资源管理系统</title>   
  6.  <mce:script src="resources/js/DirectoryTree/DirectoryTree.js" mce_src="resources/js/DirectoryTree/DirectoryTree.js"></mce:script>   
  7.  <mce:script src="resources/js/date.js" mce_src="resources/js/date.js"></mce:script>   
  8.  <link rel="stylesheet" type="text/css" href="resources/css/frame.css" mce_href="resources/css/frame.css">   
  9.  <link rel="stylesheet" type="text/css" href="resources/css/global.css" mce_href="resources/css/global.css">   
  10.  <mce:script language="javascript"><!--   
  11.   function setBgColor()   
  12.   {      
  13.    var bg=document.bgColor      
  14.    bottom.document.bgColor=bg      
  15.   }   
  16.     
  17. // --></mce:script>   
  18. </head>   
  19. <body bgcolor="#f9edff" οnlοad="setBgColor()">   
  20. <div styleClass="basewnd">   
  21.  <!-- LOGO -->   
  22.  <div align="center" class="flag">   
  23.   <iframe src="resources/HTMLFolders/Logo.html" mce_src="resources/HTMLFolders/Logo.html"  frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe>    
  24.  </div>   
  25.     
  26.  <!-- 用户登陆 -->   
  27.  <div align="center" class="user">   
  28.   <iframe src="resources/HTMLFolders/UserLogin.html" mce_src="resources/HTMLFolders/UserLogin.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
  29.  </div>   
  30.     
  31.  <!-- 搜索 -->   
  32.  <div id="search" name="test" align="center" class="top_list_home">   
  33.   <iframe id="frameSearch" name="search" src="resources/HTMLFolders/Search.html" mce_src="resources/HTMLFolders/Search.html"  frameBorder="0" scrolling="no" width="195px" height="150px" marginheight="0" marginwidth="0"></iframe>    
  34.  </div>   
  35.     
  36.  <!-- 导航条 -->   
  37.  <div align="center" class="navigation">   
  38.   <iframe src="resources/HTMLFolders/Navigation.html" mce_src="resources/HTMLFolders/Navigation.html"  frameBorder="0" scrolling="no" width="950px" height="25px" marginheight="0" marginwidth="0"></iframe>    
  39.  </div>   
  40.     
  41.     
  42.  <!-- 最新主题列表 -->   
  43.  <div align="center" class="newest_topic">   
  44.   <iframe src="resources/HTMLFolders/Sublist.html" mce_src="resources/HTMLFolders/Sublist.html" frameBorder="0" scrolling="no" width="540px" height="427px" marginheight="0" marginwidth="0"></iframe>   
  45.  </div>   
  46.  <!-- 单位目录树 -->   
  47.  <div align="center" class="welcome_tag_home">   
  48.   <iframe src="resources/HTMLFolders/DirectoryTree.html" mce_src="resources/HTMLFolders/DirectoryTree.html"  frameBorder="0" scrolling="no" width="195px" height="427px" marginheight="0" marginwidth="0"></iframe>    
  49.  </div>   
  50.  <!-- 页尾 -->   
  51.  <div align="center" class="rights_home">   
  52.   <iframe id="bottom" name="bottom" src="resources/HTMLFolders/Bottom.html" mce_src="resources/HTMLFolders/Bottom.html"  frameBorder="0" scrolling="no" width="950px" height="100px" marginheight="0" marginwidth="0" allowTransparency="true" style="background-color: red" mce_style="background-color: red"></iframe>    
  53.  </div>   
  54. </div>   
  55. </body>   
  56. </html>   
  57. 被引用的文件UserLogin.html:   
  58.   <link rel="stylesheet" type="text/css" href="../css/global.css" mce_href="css/global.css">   
  59.   <table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:1px;border-color:#eeeeee;" mce_style="border-style:solid;border-width:1px;border-color:#eeeeee;">   
  60.    <tr><td>   
  61.     <table border="0" align="left" width="190" cellpadding="0" cellspacing="0">   
  62.      <tr>   
  63.       <td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >   
  64.           
  65.       </td>   
  66.       <td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">   
  67.        <font style="height:18px;font-family:宋体;font-size:14px;"> <b>会员登录</b></font>   
  68.       </td>   
  69.      </tr>   
  70.     </table>   
  71.    </td></tr>   
  72.   </table>   
  73.      
  74.   <div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">   
  75.    <table border="0" align="left" width="193" cellpadding="1" cellspacing="0" style="border-style:solid;border-width:0px;border-color:#eeeeee;" mce_style="border-style:solid;border-width:0px;border-color:#eeeeee;">   
  76.     <tr>   
  77.      <td align="left" valign="bottom" height="45"><font class="normal">用户名:</font>   
  78.      <td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>   
  79.     </tr>   
  80.     <tr>   
  81.      <td align="left" height="40"><font class="normal">密码:</font>   
  82.      <td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>   
  83.     </tr>   
  84.     <tr>   
  85.      <td align="center" colspan="2" class="tdfnt12px">   
  86.       <input type="submit" value="登录" style="color:black;border-color:skyblue;border-style:solid;border- width:0px;vertical-align:middle;font-family:宋体;width:68px;height:24px;background:url(resources/images/ButtonBg02.png);"/>   
  87.      </td>   
  88.     </tr>   
  89.    </table>   
  90.   </div>   
  91. 现在假设“最新主题列表”文件中有一个超链接,点击其,包含“最新主题列表”的iframe就重新加载,此时需要利用javascript来实现:   
  92. <a href="" οnclick="redirect(); return false">www.baidu.com</a>   
  93. <mce:script language="javascript"><!--   
  94.     function redirect()   
  95.     {   
  96.          parent.document.frames["frameSublist"].location.href="www.baidu.com"  
  97.     }   
  98. // --></mce:script>  


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

学习HTML:iframe用法总结收藏 的相关文章

随机推荐

  • 05LinuxC线程学习之练习循环创建多个子线程和线程传参大坑(可以对比之前循环创建多个子进程)

    注 1 之前循环创建多个子进程的文章 https blog csdn net weixin 44517656 article details 109433060 2 wait回收子进程并且获取正常退出的返回值和异常退出的信号值的文章 htt
  • ESP32开发—文件系统spiffs

    文件系统有很多种 不同的操作的系统或者存储介质会选择不一样的文件系统 对于spiffs来说就是为了嵌入式设备而定制的精简版文件系统 优点是占用的内存非常小 而已不使用malloc分配内存 系统使用的内存由用户传入静态内存 缺点就是能存储的文
  • matlab傅里叶级数展开

    傅里叶级数 傅里叶级数展开 傅里叶级数展开原理 源码 方波 方波 三角波 matalb 傅里叶级数展开结果图片 傅里叶级数展开 傅里叶级数展开原理 周期函数可以通过一系列的三角函数的线性组合来逼近 傅里叶技术展开可以找到这些三角函数 首先我
  • ELK企业级日志分析系统

    ELK概述 为什么要使用 ELK 日志主要包括系统日志 应用程序日志和安全日志 系统运维和开发人员可以通过日志了解服务器软硬件信息 检查配置过程中的错误及错误发生的原因 经常分析日志可以了解服务器的负荷 性能安全性 从而及时采取措施纠正错误
  • 【Alist + Teracloud】WebDAV免费畅游互联网个人方案总结,一些支持WebDAV的应用推荐

    文章目录 1 介绍 废话 支持略过 1 1 WebDAV 是啥 1 2 支持开通 WebDAV 服务的东西 1 2 1 网盘类 公有云 1 2 2 私有云 1 2 3 本地部署 1 2 4 Alist 1 3 支持连接 WebDAV 的应用
  • 计算机网络【java面试题】

    1 计算机网络中的七层模型以及每一层的作用 OSI七层模型 功能 对应的网络协议 应用层 应用层是网络体系中最高的一层 也是唯一面向用户的一层 也可视为为用户提供常用的应用程序 每个网络应用都对应着不同的协议 HTTP TFTP FTP N
  • 开心档-软件开发入门之MongoDB 覆盖索引查询

    作者简介 每天分享MongoDB教程的学习经验 和学习笔记 座右铭 有自制力 做事有始有终 学习能力强 愿意不断地接触学习新知识 个人主页 iOS开发上架的主页 前言 本章将会讲解MongoDB 覆盖索引查询 目录 MongoDB 覆盖索引
  • Linux 查看属于某个组(例如docker组)的所有用户

    要查看属于某个组 例如docker组 的所有用户 可以使用getent命令 getent命令用于从Name Service Switch库中获取条目 要列出docker组下的所有用户 可以执行 getent group docker 这会返
  • Xilinx-Z7&K7启动模式

    Xilinx Z7 K7启动模式设置 Xilinx Z7 Xilinx K7 Xilinx Z7 UG585 P167 Xilinx K7 UG470 P21
  • Win7服务器没及时响应,主编练习win7系统服务没有及时响应启动或控制请求的修复方案...

    许多win7系统电脑的时候 常常会遇到win7系统服务没有及时响应启动或控制请求的情况 比如近日有用户到本站反映说win7系统服务没有及时响应启动或控制请求的问题 但是却不知道要怎么解决win7系统服务没有及时响应启动或控制请求 我们依照在
  • IDEA-找不到Code Coverage

    问题描述 今天做白盒测试的实验 需要代码覆盖率 但是始终找不到 在Junit中也找不到Code Coverage选项卡 问题解决 查询了之后 才知道是在初始化配置时 在插件那边未选择Coverage 没准备重装 就去欢迎界面去恢复到默认设置
  • Invoking "cmake" failed报错处理

    运行 pip install U rosdep rosinstall generator wstool rosinstall six vcstools运行完成后再重新编译 转载于 https www cnblogs com long5683
  • vue中的动态keyframes参数

    最近在负责项目中大屏模块 遇到了点小问题 现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度 top 最后的效果如下图 主要涉及到动画效果 中间部分左右两边不说 主要思路 使用animation配合 keyfram
  • 源码 QT

    如何查找QT源码 相信很多人跟我一样 对QT源码很着迷 一次偶然间 我尽然发现了QT查找源码的网站 下面给大家贴一个链接qt查源码网址 然后给大家分享一下差源码的方法 查到的源码如图所示 下面展示QRandomGenerator源码 Cop
  • Android 把枪/PDA 扫描头自回车没用 处理方法

    XML 控件加上属性 android imeOptions actionNone 转载于 https www cnblogs com LuoEast p 11597878 html
  • 大数据面试题Spark篇(1)

    目录 1 spark数据倾斜 2 Spark为什么比mapreduce快 3 hadoop和spark使用场景 4 spark宕机怎么迅速恢复 5 RDD持久化原理 6 checkpoint检查点机制 7 checkpoint和持久化的区别
  • NOIP题目解析之取石子问题

    题目 现有5堆石子 石子数依次为3 5 7 19 50 甲乙两人轮流从任一堆中取石子 取最后一颗石子的一方获胜 甲先取 请问甲有没有获胜策略 如果有 甲第一步应在哪一堆里取多少 解析 在解这一道题之前 我们可以先来把问题简化 把五堆石子转化
  • Linux系统之使用cmatrix实现数字雨效果

    Linux系统之使用cmatrix实现数字雨效果 一 cmatrix介绍 二 本地环境介绍 2 1 本地环境规划 2 2 本次实践介绍 三 环境准备工作 3 1 安装开发环境 3 2 安装基本软件 3 3 安装 ImageMagick等工具
  • Unity shader系列:好用的IDE--JetBrain Rider

    官方描述 Rider 还添加了对 shader 文件的支持 提供语法高亮显示 代码折叠 括号匹配等功能 高亮显示 ShaderLab 部分的语法错误 todo 注释加入 To Do Explorer 并高亮显示颜色属性 且提供选色笔用于编辑
  • 学习HTML:iframe用法总结收藏

    原文地址 http blog csdn net andycode article details 6899775 分类 html js css 8 Html代码 p 是框架的一种形式 也比较常用到 p