iframe nomenucontext - 创建后修改img标签

时间:2015-02-25 09:54:41

标签: javascript jquery html

您好我正在动态添加iframe,它会显示来自服务器的图像。我需要禁用此项的上下文菜单。在chrome中我可以检查元素,如果我添加oncontextmenu ="返回false"我确实得到了想要的影响。但是,在生成页面时,我无法执行此操作。这是一个工作html的例子。

Chrome code modified after page creation in inspector

但是,在创建i帧时,我无法重现这一点。这是我的代码。

        $(window).scrollTop(0);
        $('#secVerify').show();
        $("#popWaitLoad").modal("hide");
        imgLoading.hide();
        dvIframe.empty();

        //else load deposit data into interface
        $("#spanType").text(deposit.DepositType);
        $("#spanReference").text(deposit.Reference);
        $("#spanAmount").text("R " + deposit.Amount.toFixed(2));
        $("#spanDate").text(deposit.DateCreatedOffsetS);

        imageID = deposit.Deposit_Doc_imageID;
        var url = imageUrl + '/' + deposit.Deposit_Doc_imageID + '/false';

        var imgFrame = document.createElement("iframe");
        imgFrame.src = url;
        imgFrame.frameBorder = '0';
        imgFrame.scrolling = 'no';
        imgFrame.width = '100%';
        imgFrame.height = '100%';
        imgFrame.align = 'middle';
        imgFrame.id = "iframeImg";           

        dvIframe.append(imgFrame); 

我试过像这样的例子。

    $("#iframeImage").contents().find("img").attr("oncontextmenu", 'return false');

        $('#iframeImage img').on('contextmenu', function (e) {
            e.stopPropagation();
            // Your code.
            return false;
        });

但是因为img元素似乎只是在页面加载后才创建它似乎不起作用。我知道禁用菜单无济于事,我已经解释了获取仍然可用的图像的所有其他方法,但客户真的想要这个。

我已将nocontextmenu添加到body标签中,除iframe外,它可以在任何地方使用。

所以让我澄清一点,我的iframe工作正常,但是我想在特定的iframe上禁用右键单击aka上下文菜单。

1 个答案:

答案 0 :(得分:0)

我使用setAttribute设置属性并将容器定位到appendChild

function example(){
var target = document.getElementById('container');
var element = document.createElement('img');
element.setAttribute('src', 'http://gopalshenoy.files.wordpress.com/2011/04/product_demos.jpg');
//element.setAttribute('width','100%');
//element.setAttribute('height','100%');
element.setAttribute('id','iframeImage');
element.setAttribute("oncontextmenu","return false;");
target.appendChild(element);

}
// Demo-Snippet use.
window.onload=example;
<!-- Demo Snippet use -->
<div id="container"></div>

如果您使用此功能构建多个元素,则可能会因重复的ID而发现其他问题。

  

ID用于定位特定的元素' '之一,所以如果你想构建多个元素,我建议给它们< em> unique ID。

我希望这会有所帮助。快乐的编码!