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(){
 var frm = window.frames["loadpageframe"].window;//if iframe is test

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

将此代码放在iframe

之外

Answer 2

嗨，试试这个我的工作。

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);

}

在iframe中的图像上绑定来自父页面的点击事件

2 个答案: