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. 如何解决mosh中翻页只能查看一屏的问题

    最近用mosh替换了ssh作为连接开发机的工具,发现另外一个问题,ls cat随便什么命令输出结果超过一行的,向上翻页就没有了,找了下官网的FAQ也提到了这个问题,目前解决方案是使用tmux或者scr ...

  2. o'Reill的SVG精髓(第二版)学习笔记——第一章

    1.1图形系统 计算机中描述图形信息的两大系统是栅格系统(raster graphics)和矢量图形(vector graphics) 1.1.4矢量图形的用途 ①计算机辅助绘图(CAD)程序. ②设 ...

  3. JS模块化知识总结

    背景 <script src="a.js"></script> <script src="b.js"></script ...

  4. ABAP术语-Authorization Object

    Authorization Object 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/20/1006585.html Element of ...

  5. XAMPP中的MySQL与本地MySQL冲突的问题

    学习SQL时在本地中先安装了MySQL,后来因为项目需要又安装了XAMPP集成环境,今天在启动项目的时候发现启动MySQL各种问题(期望启动的是XAMPP中的MySQL服务),在Navicat中显示成 ...

  6. deepin系统无线网络卡死或者极慢的解决方案

    在初次安装deb或者fedara系列的桌面发行版的之后,经常会出现无线网络极慢甚至卡死的状况. 笔者在初次使用deepin系统的时候,也遇到同样的问题,很大程度上是由于没有安装对应的驱动. 下面给出对 ...

  7. nginx 安装目录详解

    rpm -ql nginx 路径 类型 介绍 /etc/logrotate.d/nginx  配置文件  Nginx 日志轮转,用于logrotate服务日志切割 /etc/nginx /etc/ng ...

  8. 01-HTML深入

    1.1  浏览器的工作原理 把一些标签解析成用户可视化的页面 1.2 HTML中的标签与元素 在HTML中以<xx>开始,以</xx>结束,比如<html>< ...

  9. 响应式布局--设置rem自适应

    //designWidth:设计稿的实际宽度值,需要根据实际设置 //maxWidth:制作稿的最大宽度值,需要根据实际设置 //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作 ...

  10. hadoop生态搭建(3节点)-01.基础配置

    # 基础配置# ==================================================================node1 vi /etc/hostname nod ...