将来自父页面的点击事件绑定到 Iframe 中的图像上

Question

我的父页面 abc.html 具有以下功能

function displayImageDialog(path){
  //alert(path);
}

还有 HTML 代码

<iframe src="xyz.html"  onLoad="javascript:onloadCall();" name="loadpageframe" id="loadpageframe"></iframe> 

现在在 IFrame 中，有多个 img 标签可用，如何在 img 上绑定点击事件。目前我可以为每个 img 标签分配标题

function onloadCall(){
    var $currIFrame = $('#loadpageframe');
    var img = $currIFrame.contents().find("img");
    for(var i=0;i<img.length;i++){
        img[i].title='Click to enlarge';

        //TODO click event code to pass img src attribute to
        // function displayImageDialog(src)

    }  
}

我根本不想在 IFrame 中修改我的页面。所以我正在寻找解决方案

Answer 1

您好，请在我的最后尝试一下。

function onloadCall(){
var $currIFrame = $('#loadpageframe');
var img = $currIFrame.contents().find("img");
for(var i=0;i<img.length;i++){
    img[i].title='Click to enlarge';
    img[i].onclick = function(){
        alert('hi');
        displayImageDialog($(this).attr('src'));
    };
    //TODO click event code to pass img src attribute to
    // function displayImageDialog(src)

   }  
}

function displayImageDialog(src){
alert(src);

}

Answer 2

试试这个

$(function(){
 var frm = window.frames["loadpageframe"].window;//if iframe is test

  $(frm).find("img").on("click",function() {
      $(this).attr('title','sometext');
   // do something 
  });
});

将此代码放在 iframe 之外