使用jQuery绑定iFrame

时间:2017-11-10 15:02:58

标签: jquery html iframe binding element

我正在尝试将click事件绑定到iFrame的根深蒂固的子元素,并且没有任何运气。我设法通过.on('load')事件定位iFrame并拥有它。然后,我在我设置的变量中遍历了iFrame的DOM,并找到了我正在寻找9个孩子的深度。什么是能够绑定到此的最佳方法,因为使用.find方法返回的长度为0意味着它找不到它。

这是继承:

iFrame(root)
aspnetForm(form)
s4-workspace(div)
s4-bodyContainer(div)
contentRow(div)
contentBox(div)
DeltaPlaceHolderMain(div)
DialogTable(table)
cells(3) 
ct100_PlaceHolderMain_btnOK(input) <---button I want to bind to it's click event.

所以基本上它有一个表单和一堆div作为父项,然后是一个表,它直接位于表格的一个单元格中(索引位置3)。

这是在SharePoint 2013在线上,是AttachFile模式对话框。我试图绑定到OK按钮的click事件,所以我可以在他们点击按钮后做一些事情,而不必等待文件上传的结果,这可能会很长,具体取决于文件大小和互联网速度。我想在按下按钮时弹出一个加载屏幕,这样他们就不会只是坐在那里想知道发生了什么,因为点击后没有显示任何内容。
任何帮助,将不胜感激。以下是我没有运气的尝试:

 SP.UI.ModalDialog.showModalDialog(options); //pops up the Attach File modal

 $('.ms-dlgFrame').on('load', function () { //waits for iFrame to load
      var iBody = $('.ms-dlgFrame').contents().find("body"); //returns the iFrame object correctly
      var iContent = iBody.find('#ct100_PlaceHolderMain_btnOK'); //does NOT find this--length is 0
      console.log(iBody);
      console.log(iContent);
  });

更新:  好的,所以我意识到按钮id是ctl就像控制而不是ct1 ......但它仍然无法正常工作。我实际上正在使用iContent = iBody [0] .children.perforM抓取aspnetForm并且我正在尝试定位表单的提交事件,这就是OK按钮...但是我无法使用

iContent.submit(function() {
// do stuff
})

它不起作用。我也可以通过执行iContent = iBody [0] .children.aspnetForm.ctl00 $ PlaceHolderMain $ btnOK

来获取提交按钮。

但是,再次尝试附加到提交或单击事件不起作用。

我在这里不知所措......我有表格并且我的目标是提交事件,因为当我在控制台登录时它会说“form id =”aspnetForm“onsubmit =”blah blah“” 即使我有正确的DOM元素,为什么不管我在做什么都不行?

更新2:

无法正常工作......

我绑定到iframe并找到aspnetForm,然后尝试附加到submit和onsubmit事件,ctl00_PlaceHolderMain_btnOK点击事件等。这些工作但是一旦项目提交我得到“权限被拒绝”即使它即将到来来自同一个SharePoint站点,并且应该具有相同的域。看起来按钮点击发生然后文件上传并且事件不会尝试并且直到模态关闭之后才会触发,我认为它被拒绝,因为那里没有模态。当我把调用放在.bind事件中时,它再次触发但是那时iFrame的长度为0表示它不再存在。我甚至在一个区间内把它放在一个区间内,一旦它通过使用一个hasLoaded变量来检查该框架已经加载了,一旦绑定甚至触发,我将其设置为true,但是一旦OK按钮出现,我就会得到权限被拒绝用唯一的子元素按下iContent在这一点上是“错误”:“权限被拒绝”

我知道有一种方法可以做到这一点,这是非常令人沮丧的微软将留下这个蹩脚的功能,无法附加加载屏幕甚至激活他们的OWN加载模式。我可以在附加文件模式弹出或关闭后激活模态,但与单击“确定”按钮以实际上载文件时无关。我知道我可以等待结果返回但是这会失败目的,因为此时文件已经上传了。我需要一种方法在OK按钮(id:ctl00_PlaceHolderMain_btnOK)和返回的结果之间显示一个加载页面(即,当单击OK按钮时它会出现,并且一旦来自模态的对话结果返回就会消失)。有什么建议?到目前为止,我没有尝试过任何工作。使用jQuery ---我得到一个权限被拒绝错误或者iFrame长度为0 ---它几乎就像元素不允许事件处理程序一样。

2 个答案:

答案 0 :(得分:0)

为按钮指定自己的ID并绑定到该按钮。

ID = “myButton的”

然后在JQuery中

$('#myButton').  etc

答案 1 :(得分:0)

终于找到了解决方案!

<?php if($fullName == "") { echo '<script>'; echo 'alert("Full Name is required!")'; echo '</script>'; } ?> </body>