iframe框架用法

时间:2023-03-09 16:48:23
iframe框架用法

1.iframe标签:

<iframe src="demo1.html" name="qiuqiu_Page" frameborder="0" width="500" height="500" scrolling="no"></iframe>

属性 描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。
seamless seamless 规定 <iframe> 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
定义 iframe 的宽度。

2.子页面调用父页面的对象方法:

父页面中:<div id="cs1"></div>

$("#cs1").data("petName", "qiuqiu");

      function getPetName() {
        var p_name = $("#cs1").data("petName");
        alert( p_name);
      }

子页面: <button type="button" id="gt_pName" class="btn btn-info btn-lg">点击获取宠物名称</button>

    $('#gt_pName').bind('click', function () {
      window.parent.getPetName();
    })

执行结果:

iframe框架用法

3.父页面调用子页面的方法:

父页面: <input type="button" id="gt_pName" class="btn btn-default" value="点击获取宠物的名字" />

$("#gt_pName").bind('click', function () {
  window.frames["qiuqiu_Page"].getPetName();
})

子页面:

function getPetName() {
  var p_name = $("#child_pt").data("petName");
  alert(p_name);
}

总结:

父页面调用子页面方法:window.frames["frame的名称"].function();

子页面调用父页面方法:window.parent.fn();