Iframe传值与自适应高度

Iframe交互详解

最新推荐文章于 2024-08-17 20:20:34 发布

转载最新推荐文章于 2024-08-17 20:20:34 发布 · 408 阅读

文章标签：

#iframe #传值

web网页前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现Iframe与父窗口之间的值传递、事件调用等交互操作，包括从父窗口访问Iframe内的控件、从Iframe访问父窗口的控件以及多个Iframe间的相互访问。

javascript脚本关于Iframe之间以及与父窗体的值传递,事件调用问题;

在父页面访问Iframe子窗体的txtAddress控件
window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ;

在Iframe子窗体1访问父页面的TextBox1控件 , 子窗体1把值赋给子窗体2的某个控件
string strValue = "从子窗体传递给父页面的值" ;
下面是在Page_Load事件里面调用的,当然可以写在javascript脚本里面
this.Response.Write("<script>parent.document.all('TextBox1').value = '" + strValue + "';</script>");
this.Response.Write("<script>if( parent.document.all('TextBox2').value = '0')parent.document.all('TextBox1').value = '44';</script>");

在Iframe子窗体1访问子窗体2的txtAddress控件子窗体1把值赋给子窗体2的某个控件
window.parent.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ;

父窗体提交两个Iframe子窗体
window.frames["ifrMapCompanyDetails"].Form1.submit();
window.frames["ifrMapProductInfoDetails"].Form1.submit();

Iframe子窗体调用父页面的javascript事件
window.parent.XXX()

//父页面调用当前页面中IFRAME子页面中的脚本childEvent
function invokechildEvent()
{ var frm = document.frames["ifrChild1"].childEvent(); }
或者调用当前页面中第一个IFRAME中的脚本childEvent
{ var frm = document.frames[0]; frm.childEvent(); }

//子页面调用父窗体的某个按钮的按钮事件
window.parent.Form1.btnParent.click()

父页面调用子窗体的某个按钮的按钮事件
window.frames['ifrChild1'].document.all.item("btnChild3").click();

iframe自适应高度

function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
    if (win && !window.opera)
    {
     if (win.contentDocument && win.contentDocument.body.offsetHeight)

      win.height = win.contentDocument.body.offsetHeight;
     else if(win.Document && win.Document.body.scrollHeight)
      win.height = win.Document.body.scrollHeight;
    }
}
}

</script>
用法:win 为iframe标识
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>