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. Intellij Idea配置MapReduce编程环境

    原文参考地址:http://www点w2bc点com/article/229178 增加内容:question1: Hadoop2以上版本时,在Hadoop2的bin目录下没有winutils.exe ...

  2. 【java】HashSet

    package com.tn.hashSet; public class Person { private int id; private String name; private String bi ...

  3. [array] leetcode - 42. Trapping Rain Water - Hard

    leetcode - 42. Trapping Rain Water - Hard descrition Given n non-negative integers representing an e ...

  4. listbox控件使用

    1. 属性列表: SelectionMode    组件中条目的选择类型,即多选(Multiple).单选(Single)    Rows             列表框中显示总共多少行    Sel ...

  5. bzoj 3531: [Sdoi2014]旅行

    Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰. ...

  6. nginx php上传配置

    .file_uploads 设为On,允许通过HTTP上传文件 2.upload_tmp_dir 文件上传至服务器时用于临时存储的目录,如果没指定,系统会使用默认的临时文件夹(我的机器是/tmp). ...

  7. deepin系统下安装git

    1.打开命令行 2.输入 sudo apt-get update sudo apt-get install git 3.显示 建议安装: git-daemon-run | git-daemon-sys ...

  8. MySQL 权限与用户表

    1.授权时创建用户 grant all privileges on *.* to zhengwenqiang@localhost identified by 'zhengwenqiang'; 2.收回 ...

  9. Hello TensorFlow

    官方说明:https://www.tensorflow.org/install/ 环境: 操作系统 :Windows 10 家庭中文版 处理器 : Intel(R) Core(TM) i7-7700 ...

  10. Concurrency Is Not Parallelism （Rob pike）

    Rob pike发表过一个有名的演讲<Concurrency is not parallelism>(https://blog.golang.org/concurrency-is-not- ...