1、

<a href="port" target="frame_view">港口资料</a>

<iframe id="external-frame" onload="setIframeHeight(this)"  src="initialValue"  frameborder="0" scrolling='no' height="100%"  width="100%" name="frame_view" ></iframe>

使用target可以多个页面调用

2、使之自适应屏幕大小

//iframe自适应高度
function setIframeHeight(iframe) {
if(iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if(iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function() {
setIframeHeight(document.getElementById('external-frame'));
};

关于iframe的使用 以及自适应页面高度的更多相关文章

  1. iframe动态改变内嵌页面高度

    test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...

  2. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  3. jquery iframe取得元素与自适应高度

    总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在 ...

  4. html页面高度自适应

    本文实现的效果是依据浏览器分辨率的不同.页面底端背景色自适应浏览器高度,也就是能够自己主动填充背景色. <script type="text/javascript"> ...

  5. 获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素

    最近接手了别人的项目,别人用到了iframe,自己在实战中总结了一些关于iframe的小问题. 获取Iframe页面高度并赋值给Iframe Html <iframe name="co ...

  6. swiper 不同页面高度自适应

    在使用swiper写页面滑动时发现不同页面高度无法自适应,使用autoHeight:true也不起作用 研究了一下发现可以这样设置 .swiper-slide{ overflow: hidden; } ...

  7. jquery库实现iframe自适应内容高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id=&qu ...

  8. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  9. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

随机推荐

  1. mui的事件实现(持续更新)

    长按事件: mui('.mui-scroll').on('longtap', '.index-tab-item', function(e) { alert("长按生效") }); ...

  2. 数据流管理:redux

    redux和react是两个独立的库,所以redux并不是非用不可,是在Flux框架的基础上改进的一个框架,所以一鸣惊人 redux的三大基本原则 唯一的数据源(single source of tr ...

  3. 菜鸟笔记 -- Chapter 6.1 面向对象概述

    6.1 面向对象概述 在程序开发的初期人们使用结构化开发语言,但是随着时间的流逝,软件的规模越来越庞大,结构化语言的弊端逐渐暴露出来,开发周期被无限制拖延,产品质量也不尽如人意,人们终于发现结构化语言 ...

  4. Angularjs基础(三)

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值ng-model指令 ng-model指令可以 ...

  5. 于是他错误的点名开始了(trie树)

    题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已结束比赛CON900). ...

  6. 洛谷P1709 [USACO5.5]隐藏口令Hidden Password(最小表示法)

    题目描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...

  7. JQuery实现注册表单验证

    效果图如下: 注册页面HTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  8. 如何在linux系统内用openssl 生成 过期的证书

    需求:验证过期的证书在系统中不能使用. 问题:如何生成过期的证书呢? 解决方法:1.调整系统时间 2.生成证书 3.验证证书startdate 和 enddate 是否符合你的预期 1.调整系统时间 ...

  9. jsp传参 servlet接收中文乱码问题

    在公司实习了8个月,一直都是做android和h5的,但是发现做程序连一点服务都不会该怎么办,所以最近开始学起了java,不知道是不是因为框架学多了,现在看起springmvc框架比以前看起来简单太多 ...

  10. webpack 4.14配置详解

    1.安装nodejs 官网下载nodejs,安装时可能会爆 2503错误,解决办法是:使用管理员命令执行安装文件.cmd ->命令提示符(管理员)-> 输入: msiexec /packa ...