如何在页面中获取iframe中的某个元素

场景：在首页中，用iframe引用头部
目的：在首页中获取iframe中的登录class或id
实现：用jqeury实现 点击登录弹出登陆注册框显示 / 点击X登录注册框和遮罩层隐藏

//页面iframe引入

<iframe src="/登录表单弹窗.html" id="ddl"  frameborder="0" scrolling="no" style="position: absolute; width:100%; display: none; height: 5500px;"></iframe>
    <iframe src="/网页头部.html" id="myIframe" name="ifm" frameborder="0" scrolling="no" style="width:100%; height: 148px;"></iframe>
  

第一种方法：(建议封装起来）

jqeury写

$(function () {
 var headerIframe = $('#myIframe');
if (headerIframe.length > 0) {
      // 等待iframe加载完成
 headerIframe.on('load', function() {
         // 获取iframe内部文档
         var contentDoc = headerIframe[0].contentDocument || headerIframe[0].contentWindow.document;
         // 获取指定的元素
          $(contentDoc).find('#dl').click(function(){
               //遮罩层和登录
              $("#ddl").show();
          })
    });
 }
 }）

第二种方法：(建议封装起来)
jqeury写

$(function () {
//等待 iframe加载过程
$("#myIframe").on("load",function(){
// 在iframe中找到登录的id
   $("#myIframe").contents().find('#dl').click(function(){
   //想要实现的样式
      $("#ddl").show();
      //找到
      $("#ddl").contents().find('.X').click(function(){
         $("#ddl").hide()
 
       })
   })
})
})