iframe标签里面的页面元素只读，可以通过设置一个只读的透明div进行遮罩实现。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>

    .mask

    {

        position: absolute;

        width: 100%;

        height: 100%;

        z-index: 1;

        filter: alpha(opacity=0);

        opacity: 0;

        background: #ffffff;

    }

</style>

<div style="position: relative">

    <div class="mask">

    </div>

    <iframe src="http://bbs.csdn.net" width="500px" height="300px" id="ifr"></iframe>

</div>

效果：

iframe标签里面的页面元素只读的更多相关文章

  1. iframe标签flash遮盖页面元素问题——wmode参数

    最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...

  2. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  3. iframe中操作主体页面的元素，方法

    在不使用三大框架的情况下,iframe的使用可以做到在页面中直接引入别的页面作为当前页面的一部分,但是在iframe的使用过程中存在一些相互之间的操作 例如在iframe中获取主页面的元素,使用主页面 ...

  4. iframe 调用父页面元素

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs ...

  5. iframe多层嵌套时获取元素总结

    父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...

  6. 使用iframe标签结合springMvc做文件上传

    1.iframe.jsp <body> <h1>测试iframe文件上传</h1> <!-- 1.要求表单的target属性名称与iframe的name名字一 ...

  7. iframe标签在PC端的使用

    随着前端框架的崛起 各种组件化 模块化开发 然而我发现在PC端要考虑兼容 ~~~~ 自己琢磨着 在PC端怎么吧一个页面做成一个公共的部分  发现有个iframe标签可以在页面中嵌套 虽然iframe可 ...

  8. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  9. Selenium_webdriver获取iframe子页面元素

    有时候我们在定位一个页面元素的时候发现一直定位不了,反复检查自己写的定位器没有任何问题,代码也没有任何问题.这时你就要看一下这个页面元素是否在一个iframe中,这可能就是找不到的原因之一.如果你在一 ...

随机推荐

  1. CSS实现文字换行

    强制不换行:div{ white-space:nowrap; } 自动换行: div{ word-wrap:break-word; word-break:normal; } 强制不换行 white-s ...

  2. html5中将图片的绝对路径转换成文件对象

    html5中将图片的绝对路径转换成文件对象 将图片的绝对路径转换成base64编码,请看这篇文章 我们先来理解基本知识点: 1. 理解HTML5中的FileList对象与file对象. 在HTML5中 ...

  3. 《Google软件测试之道》【PDF】下载

    <Google软件测试之道>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382198 内容介绍 每天,Google都要测试和发布 ...

  4. 50、html补充

    今天补充几个html标签 <body>内常用标签 1.<div>和<span> <div></div> : <div>只是一个块 ...

  5. dispatch_sync和dispatch_async的区别

    dispatch_sync 线程同步.dispatch_async线程异步 比如 //同步 dispatch_sync(dispatch_get_global_queue(DISPATCH_QUEUE ...

  6. 排查程序死循环，死锁的方法 ——pstack

    pstack命令可显示每个进程的栈跟踪,pstack $pid即可,pstack命令须由$pid进程的属主或者root运行. 这次出现cpu占比100%的情况,但看memory占比,并无异常,怀疑是某 ...

  7. php按照中文首字母排序

    1> 网络上很多php的工具类可以将汉字转为拼音: 2> 将拼音进行排序即可 另一种则是类似mysql转码方式: 1 foreach ($array as $key=>$value) ...

  8. 二:mysql安装配置、主从复制配置详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8213723.html 邮箱:moyi@moyib ...

  9. php消息队列之 think queue消息队列初体验

    使用thinkphp 5的  消息队列 think queue ● php think queue:listen --queue queuename ● php think queue:work -- ...

  10. 队列详解及java实现

    导读 栈和队列是有操作限制的线性表. 目录 1.队列的概念.特点.存储结构. 2.栈队列的java实现. 概念 队列是一种在一端进行插入,而在另一端进行删除的线性表.1.队列的插入端称为队尾:队列的删 ...