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. 固定导航栏demo

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  2. vue webpack多页面构建

    项目示例地址: https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run ...

  3. Angularjs基础(五)

    AngularJS Select(选项框) AngularJS 可是使用数组或对象创建一个下拉列表选项.使用ng-options创建选项框 在AngularJS 中我们可以使用ng-option指令来 ...

  4. Mongodb在window上启动

    MongoDB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.这里主要讲如何在windows平台下安装MongoDB. 安装最新版本mon ...

  5. 2018 Wannafly summer camp Day8--区间权值

    区间权值 小Bo有\(n\)个正整数\(a_1\)--\(a_n\),以及一个权值序列\(w_1\)--\(w_n\),现在她定义\(f(l,r)=(\sum_{i=l}^r a_i^2) *w_{r ...

  6. 在C++中如何实现文件的读写

    一.ASCII 输出为了使用下面的方法, 你必须包含头文件<fstream.h>(译者注:在标准C++中,已经使用<fstream>取代< fstream.h>,所 ...

  7. Linux分享笔记:shell终端的介绍

    [1] Linux中 “shell终端” 和 “bash解释器” 的区别 shell终端是通过基于系统调用接口开发出的程序,用来让用户与系统进行对话,管理计Linux系统.它是一个命令行工具,操作类似 ...

  8. 洛谷 U45568 赌神:决斗

    题目描述 \mathcal{tomoo}tomoo决定与\mathcal{CYJian}CYJian进行决斗! 已知\mathcal{tomoo}tomoo有\mathcal{N}N张扑克牌,每张扑克 ...

  9. 记一次防火墙导致greenplum装机失败及定位修复过程

    一.问题现象 20180201:15:06:25:028653 gpinitsystem:sdw1-2:gpadmin-[INFO]:--------------------------------- ...

  10. 中恳中笨 搭建flask封装环境

    话不多说,先干再说..... 打开pycharm,创建一个关于flask的项目 2.创建一个App的文件包 3.把staic和templates文件包拖进App里 4.把app.py文件改为manag ...