`
lzkyo
  • 浏览: 474975 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

学习HTML:iframe用法总结收藏

    博客分类:
  • Jsp
阅读更多

<iframe>是框架的一种形式,也比较常用到。

一:几个例子——演示iframe的基本用法

例1:
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>
不用多说了,iframe的各个属性含义如下:
width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;
注意:URL建议用绝对路径;传说中百DU用:<iframe width=0 height=0 frameborder=0 scrolling=auto src="WWW" mce_src="WWW" .webjx.com></iframe><br />黑了88*8。。。
例2:
如果一个页面里面有框架。。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定).
<iframe name=**  ></iframe>
然后在修改默认打开模式,:网页HEAD中加上<a href="URL" mce_href="URL" target=**>或部分连接的目标框架设为(**).
例3:
要插入一个页面。要求只拿中间一部分。其他的都不要,代码如下:
<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>
控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170 
scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。
例4:
    1、页面内加入iframe
<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL" mce_src="URL"></iframe>,
scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。
  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>
  3、如果把frameborder设为1,效果就像文本框一样
  透明的IFRAME的用法
  必需IE5.5以上版本才支持
  在transparentBody.htm文件的<body>标签中,我已经加入了style="background- color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:
<IFRAME ID="Frame1" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm" mce_SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" mce_SRC="transparentBody.htm" STYLE="background-color: green" mce_STYLE="background-color: green"> </IFRAME>

 

二:(难点)设置iframe框架的背景色

 

a.htm  
  <mce:script type="text/javascript"><!--
  
  function   setBG(){  
  var   strColor=document.bgColor;  
  frm.document.bgColor=strColor;  
  }  
  
// --></mce:script>  
  <body   style="background-color:red" mce_style="background-color:red"   onload='setBG()'>  
  <iframe   src="about:blank" mce_src="about:blank"   name=frm></iframe>

 

 

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

 

 

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

 

 

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

 

 

 

 

 

 

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

 

 

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

<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>
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓应该怎么实现呢?
回答:用下列代码替换网页的<title>..</title>
<SCRIPT LANGUAGE="javascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<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;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" mce_SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快!"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" mce_SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)"      onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快!"></TD>
</TR>
</TABLE>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下面这段代码可以实现IFrame自适应高度,即随着页面的长度,自动适应以免除页面和IFrame同时出现滚动条。
源代码如下:
<mce:script type="text/javascript"><!--
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
// --></mce:script>

 

六:iframe属性

属性 值 描述 DTD
align left
right
top
middle
bottom
 规定如何根据周围的文本来排列此框架。 TF
frameborder 1
0
 规定是否显示框架的边框。 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

 

 

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

以下是本人自己在实际项目开发时利用frame写的一段源代码,仅供参考:
主文件(框架):
<html>
<head>
 <title>教育局资源管理系统</title>
 <mce:script src="resources/js/DirectoryTree/DirectoryTree.js" mce_src="resources/js/DirectoryTree/DirectoryTree.js"></mce:script>
 <mce:script src="resources/js/date.js" mce_src="resources/js/date.js"></mce:script>
 <link rel="stylesheet" type="text/css" href="resources/css/frame.css" mce_href="resources/css/frame.css">
 <link rel="stylesheet" type="text/css" href="resources/css/global.css" mce_href="resources/css/global.css">
 <mce:script language="javascript"><!--
  function setBgColor()
  {   
   var bg=document.bgColor   
   bottom.document.bgColor=bg   
  }
 
// --></mce:script>
</head>
<body bgcolor="#f9edff" onload="setBgColor()">
<div styleClass="basewnd">
 <!-- LOGO -->
 <div align="center" class="flag">
  <iframe src="resources/HTMLFolders/Logo.html" mce_src="resources/HTMLFolders/Logo.html"  frameBorder="0" scrolling="no" width="950px" height="115px" marginheight="0"></iframe> 
 </div>
 
 <!-- 用户登陆 -->
 <div align="center" class="user">
  <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> 
 </div>
 
 <!-- 搜索 -->
 <div id="search" name="test" align="center" class="top_list_home">
  <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> 
 </div>
 
 <!-- 导航条 -->
 <div align="center" class="navigation">
  <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> 
 </div>
 
 
 <!-- 最新主题列表 -->
 <div align="center" class="newest_topic">
  <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>
 </div>
 <!-- 单位目录树 -->
 <div align="center" class="welcome_tag_home">
  <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> 
 </div>
 <!-- 页尾 -->
 <div align="center" class="rights_home">
  <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> 
 </div>
</div>
</body>
</html>
被引用的文件UserLogin.html:
  <link rel="stylesheet" type="text/css" href="../css/global.css" mce_href="css/global.css">
  <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;">
   <tr><td>
    <table border="0" align="left" width="190" cellpadding="0" cellspacing="0">
     <tr>
      <td align="left" valign="middle" width="20" height="25" class="tdfnt12px" background="../images/title_bar2.png" >
       
      </td>
      <td align="left" valign="bottom" height="25" class="tdfnt12px" background="../images/title_bar2.png">
       <font style="height:18px;font-family:宋体;font-size:14px;"> <b>会员登录</b></font>
      </td>
     </tr>
    </table>
   </td></tr>
  </table>
  
  <div id="divLogin" style="visibility:visible;position:absolute;left:10px;top:30px">
   <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;">
    <tr>
     <td align="left" valign="bottom" height="45"><font class="normal">用户名:</font>
     <td valign="bottom"><input type="text" name="userAreaUserName" id="userAreaUserName" class="id" maxlength="16"/></td>
    </tr>
    <tr>
     <td align="left" height="40"><font class="normal">密码:</font>
     <td><input type="password" name="userAreaUserPwd" id="userAreaUserPwd" class="pwd" maxlength="16"/></td>
    </tr>
    <tr>
     <td align="center" colspan="2" class="tdfnt12px">
      <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);"/>
     </td>
    </tr>
   </table>
  </div>
现在假设“最新主题列表”文件中有一个超链接,点击其,包含“最新主题列表”的iframe就重新加载,此时需要利用javascript来实现:
<a href="" onclick="redirect(); return false">www.baidu.com</a>
<mce:script language="javascript"><!--
    function redirect()
    {
         parent.document.frames["frameSublist"].location.href="www.baidu.com"
    }
// --></mce:script>

 

分享到:
评论

相关推荐

    layui-iframe.rar

    总结来说,"layui-iframe.rar"提供的内容可以帮助开发者深入理解和使用layui框架,特别是如何在后台管理系统中利用layui的iframe组件构建高效的多窗口布局。通过学习和实践,开发者能够掌握layui的模块化开发模式,...

    html编写总结

    - `&lt;noscript&gt;&lt;iframe src=*.html&gt;&lt;/iframe&gt;&lt;/noscript&gt;` 可以阻止网页被“另存为”,但此方法并非万能,现代浏览器可能不会完全遵守。 - `查看网页源代码 onclick="window.location=''view-source:''+''...

    贵美商城商品详细信息

    2. **表格布局的应用**:熟悉表格标签的使用方法,了解其在特定场景下的优势与局限性。 3. **CSS美化网页**:掌握使用CSS进行网页美化的技巧,包括字体、颜色、边框等样式设置。 4. **盒子模型的理解与应用**:深入...

    图库新版jQuery焦点图 JS代码

    // ad function dy(code) ...document.writeln ('&lt;iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...

    基于单片机的科学型计算器设计(51+1602+KEY40)#0067

    包括:源程序工程文件、Proteus仿真工程文件、配套技术手册等 1、采用51/52单片机作为主控芯片; 2、采用1602液晶显示; 3、采用5*8矩阵键盘输入; 4、功能键包括:复位键(RST),回删键(DEL),确定键(OK),第二功能切换(2U),背光灯键(LED); 5、运算均为单精度浮点数,包括: 加(+),减(-),乘(x),除(÷), e底指数(e^n),N次方(x^n),开N次方(sqrt), 正弦(sin),余弦(cos),正切(tan), 对数(log), 阶乘(n!)(n<35), 排列(Arn), 累加(∑), *开启第二功能(2U)后可用: 反正弦(asin),反余弦(acos),反正切(atan), 组合(Crn)

    基于三菱FX2N PLC的机械手控制系统设计与实现

    内容概要:本文详细介绍了如何利用三菱FX2N系列PLC构建机械手控制系统。主要内容涵盖电路图设计、IO表配置、源程序编写以及单机组态。文中提供了具体的梯形图编程实例,展示了如何通过PLC精确控制机械手的各种动作,如抓取、移动和放置。此外,还分享了许多实用的调试技巧和注意事项,强调了传感器状态交叉验证和关键动作的时间守护机制。通过这些内容,读者可以全面了解PLC在机械手控制中的应用。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC编程和机械手控制感兴趣的初学者和有一定经验的研发人员。 使用场景及目标:适用于需要设计和实施机械手控制系统的工业场合,帮助工程师掌握PLC编程技巧,提高机械手控制系统的稳定性和可靠性。 其他说明:文章不仅提供理论指导,还包括大量实战代码和调试经验,有助于读者快速上手并在实践中不断优化系统性能。

    豆包生成美女的AI提示词基于豆包平台的美女图像生成提示词

    内容概要:本文档提供了用于生成具有时尚性感元素的美女跳舞图像的提示词指南。文档内容包括角色设定为擅长描绘时尚与超现实主义图片的创作者,背景设定强调女性形象,偏好展现性感漂亮女孩的镜头表达。目标在于根据用户指令创作三幅统一风格的图像,注重色彩搭配和高清效果,同时确保每张图片都具备半身像、真实感和电影效果的特点。文档还给出了具体的输出示例,详细描述了人物形象、服装搭配以及场景布置等要素,旨在为用户提供满意的图像生成服务。; 适合人群:对图像生成感兴趣,尤其是喜欢带有时尚性感元素的美女图像的用户。; 使用场景及目标:①根据用户提供的简单场景信息(如户外或室内)生成三幅不同场景但风格统一的赛博朋克风格美女跳舞图像;②确保生成的图像符合特定的要求,如半身像、真实感、电影效果、性感服装、特定灯光效果等;③通过询问用户对生成图像的满意度来保证服务质量。; 其他说明:文档明确了图像生成的工作流程,从接收用户指令到根据反馈调整生成内容,确保整个过程高效且满足用户需求。同时,文档还限制了生成图像的具体条件,如场景必须为赛博朋克风格、不能出现鞋子和其他人等,以保证图像的独特性和一致性。

    蓝桥杯大赛模拟题PDF

    题目描述 1.问题描述 一个正整数如果任何一个数位不大于右边相邻的数位,则称为一个数位递增的 数,例如1135是一个数位递增的数,而1024不是一个数位递增的数。 给定正整数n,请问在整数1至n中有多少个数位递增的数? 输入格式 输入的第一行包含一个整数n。 输出格式 输出一行包含一个整数,表示答案。 样例输入 30 样例输出

    基于非对称纳什谈判的多微网电能共享优化策略及其MATLAB实现

    内容概要:本文详细介绍了基于非对称纳什谈判的多微网电能共享运行优化策略及其MATLAB代码实现。首先阐述了纳什谈判和合作博弈的基本理论,然后将多微网电能共享合作运行模型分解为微网联盟效益最大化和合作收益分配两个子问题。文中展示了如何通过交替方向乘子法(ADMM)进行分布式求解,确保各微网隐私安全。此外,还探讨了电转气(P2G)和碳捕集(CCS)设备的应用,以实现低碳调度。最后,通过具体代码示例解释了模型的构建、求解及优化过程。 适合人群:对电力系统优化、博弈论、MATLAB编程感兴趣的科研人员和技术开发者。 使用场景及目标:适用于希望深入了解多微网电能共享优化策略的研究者,旨在提高微网联盟的整体效益并实现公平合理的收益分配。同时,该策略有助于降低碳排放,提升系统的环境友好性和经济性。 其他说明:文章提供了详细的代码注释和调试技巧,帮助读者更好地理解和实现这一复杂的优化策略。

    MATLAB机器人仿真:基于视觉控制的六轴机械臂运动路径规划与实现

    内容概要:本文详细介绍了如何利用MATLAB进行六轴机械臂的视觉控制系统仿真。首先,通过MATLAB的图像处理工具箱捕捉并处理实时视频流,使用HSV颜色空间进行颜色阈值处理,从而定位红色小球的位置。然后,借助Robotics Toolbox中的逆运动学模块,将摄像头获取的目标位置转换为机械臂的关节角度,确保机械臂能够精准地追踪目标。此外,还讨论了路径规划的方法,如使用五次多项式插值和平滑滤波器,使机械臂的动作更加流畅。文中强调了实际应用中可能遇到的问题及其解决方法,如奇异点处理、坐标系转换和机械臂的速度限制等。 适合人群:具有一定编程基础和技术背景的研究人员、工程师以及对机器人视觉控制感兴趣的开发者。 使用场景及目标:适用于希望在MATLAB环境中快速搭建和测试机械臂视觉控制系统的科研人员和工程师。主要目标是掌握从图像处理到机械臂控制的完整流程,理解各模块的工作原理,并能够在实际项目中应用。 其他说明:本文不仅提供了详细的代码示例,还分享了许多实用的经验和技巧,帮助读者更好地理解和优化仿真系统。同时提醒读者注意仿真与现实之间的差异,如摄像头延迟、机械臂传动误差等问题。

    【KUKA 机器人坐标的建立】:mo2_base_en.ppt

    KUKA机器人相关文档

    【KUKA 机器人资料】:KAKA机器人汽车座椅测试系统.pdf

    KUKA机器人相关文档

    三相变流器MPC控制:Matlab/Simulink仿真实现及优化技巧

    内容概要:本文详细介绍了三相变流器的模型预测控制(MPC)在Matlab/Simulink环境下的实现过程。首先,初始化程序设置了关键参数,如直流母线电压、开关频率和控制周期等,确保系统的稳定性和效率。接着,通过MPC_sfun.c实现了核心控制算法,采用状态空间模型进行滚动预测,提高了系统的动态响应能力。最后,利用out.m生成高质量的仿真结果图,展示了负载突变时的快速恢复特性,并提供了优化建议,如调整代价函数权重和引入软约束等。 适合人群:电力电子工程师、控制系统研究人员以及对MPC感兴趣的科研工作者。 使用场景及目标:适用于需要精确控制电压电流的场合,如电动汽车充电站、风力发电系统等。主要目标是提高系统的动态响应速度、降低总谐波失真(THD),并在性能和计算负担之间取得平衡。 其他说明:文中提到了一些实用技巧,如控制周期的选择、预测步长的优化、图形绘制的最佳实践等,有助于读者更好地理解和应用MPC控制策略。同时,强调了在实际应用中需要注意的问题,如避免过高开关频率导致器件损坏等。

    网络炒作策划要点解析.ppt

    网络炒作策划要点解析.ppt

    三菱Q03UDE PLC SFC编程模板在16轴伺服控制系统中的应用与优化

    内容概要:本文详细介绍了三菱Q03UDE PLC使用SFC(顺序功能图)编程方法在16轴伺服控制系统中的应用。文章首先概述了硬件配置,包括500个IO点、16轴伺服控制以及触摸屏的画面编程。接着深入探讨了SFC编程的具体实现方式,如将复杂的轴控制分解为独立的流程块,利用并行结构解决多轴同步问题,通过触摸屏实时监控和反馈SFC步状态,以及如何高效管理和复用输出点。此外,文章还讨论了SFC在状态管理和报警处理方面的优势,并提供了具体的代码示例来展示其实现细节。最后,作者分享了一些实用技巧和注意事项,强调了SFC编程相比传统梯形图的优势。 适合人群:从事工业自动化控制系统的工程师和技术人员,尤其是对三菱PLC和SFC编程感兴趣的读者。 使用场景及目标:适用于需要进行复杂多轴伺服控制项目的工程师,旨在提高调试效率、减少信号冲突、缩短新人培养周期,并提供一种更加直观和高效的编程方法。 其他说明:文中提到的实际项目经验有助于读者更好地理解和应用SFC编程技术,同时也提醒了一些常见的错误和陷阱,帮助读者避免不必要的麻烦。

    LabVIEW与三菱FX3U PLC串口通讯:基于Modbus协议的简易实现及应用

    内容概要:本文详细介绍了如何使用LabVIEW实现与三菱FX3U PLC的串口通讯,采用Modbus无协议通讯方式进行简单读写操作。主要内容包括PLC通讯参数配置、LabVIEW工程结构搭建、Modbus报文构造方法以及具体的读写数据模块实现。文中提供了详细的代码示例和注意事项,帮助读者快速理解和实践这一通讯过程。 适合人群:对工业自动化有一定兴趣的技术人员,尤其是熟悉LabVIEW和三菱PLC的工程师。 使用场景及目标:适用于需要将LabVIEW作为上位机与三菱FX3U PLC进行串口通讯的应用场合,如工业控制系统、实验教学等。主要目标是掌握Modbus协议的基础知识及其在LabVIEW中的具体实现。 其他说明:文章还提供了一些常见的错误排查方法和实用技巧,如CRC校验的处理、地址偏移量的注意事项等。此外,附带了完整的源码供读者下载和参考。

    图像检索-基于零样本开集的草图图像检索系统实现-附项目源码+流程教程-优质项目实战.zip

    图像检索_基于零样本开集的草图图像检索系统实现_附项目源码+流程教程_优质项目实战

    基于C语言写的电话簿程序

    基于C语言写的电话簿程序

    基于单片机的电压(20V)检测设计(51+1602+AD0808)#0063

    包括:源程序工程文件、Proteus仿真工程文件、配套技术手册等 1、采用51单片机作为主控芯片; 2、采用1602液晶显示检测电压值,范围0~20V; 3、采用ADC0808进行模数转换;

    【剧本杀AI提示词指令】基于AI的剧本杀定制化创作系统(deepseek,豆包,kimi,chatGPT,扣子空间,manus,AI训练师)

    内容概要:本文介绍了一个专业的剧本杀创作作家AI。它能根据客户需求创作各种风格和难度的剧本杀剧本,并提供创作建议和修改意见。其目标是创造引人入胜、逻辑严密的剧本体验。它的工作流程包括接收理解剧本要求、创作剧本框架情节、设计角色背景线索任务剧情走向、提供修改完善建议、确保剧本可玩性和故事连贯性。它需保证剧本原创、符合道德法律标准并在规定时间内完成创作。它具备剧本创作技巧、角色构建理解、线索悬念编织、文学知识和创意思维、不同文化背景下剧本风格掌握以及剧本杀游戏机制和玩家心理熟悉等技能。; 适合人群:有剧本杀创作需求的人群,如剧本杀爱好者、创作者等。; 使用场景及目标:①为用户提供符合要求的剧本杀剧本创作服务;②帮助用户完善剧本杀剧本,提高剧本质量。; 阅读建议:此资源详细介绍了剧本杀创作作家AI的功能和服务流程,用户可以依据自身需求与该AI合作,明确表达自己的创作需求并配合其工作流程。

Global site tag (gtag.js) - Google Analytics