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. npm ERR! code ENOENT (未找到文件 error no entry)

    问题: ENOENT一般是没找到文件或路径,包括因为权限问题没找到的情况 解决: 我这个是 目录选择错了 其他:

  2. 关于java dom解析的问题

    如下的xml代码: <persons> <person> <name>小强</name> <sex>male</sex> < ...

  3. LeetCode 删除链表倒数第N个节点

    基本思路 定义两个指示指针a b 让a先行移动n+1个位置 若a指向了NULL的位置,则删除的是头节点(由于走过了n+1个节点刚好指在尾部的NULL上) 否则让b与a一起移动直至a->next, ...

  4. django环境搭建和学习

    由于服务器down了好几天,前几天做的django的project全都在上面,无法继续开展工作,所以决定在本地重新部署一套virtualenv 之前没有好好整理过部署过程(其实也不难),所以决定写个随 ...

  5. JS高级. 01 复习JS基础

    1. JavaScript 包含: ____, ____, 和 ____. 2. JavaScript 的基本类型有 ____, ____, 和 ____. 3. JavaScript 的复合类型有 ...

  6. Docker(三):部署软件

    Docker的镜像文件可以在镜像仓库中进行搜索. 部署软件目录导航: 常用命令 部署 Tomcat 部署 MySQL 部署 Oracle 常用命令 docker的常用命令如下: docker -v , ...

  7. SpringBoot学习(1)

    springboot的自动配置功能,主要流程如下: 1 启动的时候加载我们的主配置类,也就是我们的入口类:从而开启我们的自动配置配置功能,这个是通过@EnableAutoConfiguration注解 ...

  8. JavaScript 转载

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  9. centos安装zabbix(server+agent)

    本文包含zabbix_server编译安装,zabbix_agent编译安装,中文字体修正 Mysql模板监控,Nginx模板监控,以及简单的web页面的使用 中文乱码的解决方案 zabbix乱码是字 ...

  10. struts2学习

    struts2是一种基于mvc模式的轻量级web框架,它本质上相当于一个servlet,在mvc设计模式中,struts2作为控制器(Controller)来建立模型与视图的数据交互,struts2采 ...