如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度

如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度,第1张

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。当用户打开浏览器访问mailhtml的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过locationhash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如locationhref就管理页面的url,用locationhref=url就可以直接将页面重定向url。而locationhash则可以用来获取或设置页面的标签值。比如>

关键代码:

iframe主页面:mainhtml

<iframe id="iframeB"  name="iframeB" src=">

iframe嵌套页面:Bhtml

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe> 

<script type="text/javascript">

function sethash(){

hashH = documentdocumentElementscrollHeight; //获取自身高度

urlC = ">

中介页面:Ahtml

<script>

function pseth() {

var iObj = parentparentdocumentgetElementByIdx_x_x_x('iframeB');//A和main同域,所以可以访问节点

iObjH = parentparentframes["iframeB"]frames["iframeA"]locationhash;//访问自己的location对象获取hash值

iObjstyleheight = iObjHsplit("#")[1]+"px";// *** 作dom

}

pseth();

</script>

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并 *** 作其父窗口main的dom属性即可。

<img id="_img" src="abcjpg" >

<script type="text/javascript">

function getWH(){

var id="_img";

var w=0;

var h=0;

// 具有较好的通用性

var real= documentgetElementById(id)height || documentgetElementById(id)styleheight || documentgetElementById(id)offsetHeight;

h=parseInt(real);

real= documentgetElementById(id)width || documentgetElementById(id)stylewidth || documentgetElementById(id)offsetWidth;

w=parseInt(real);

alert("w:"+w+" ; h:"+h)

}

getWH();

</script>

JS就可以获取了,

documentgetElementById("DIV的ID或者其它选择")offsetTop;这是离顶部

JQ可以这样:

$("#aaa")offset()top; //jq获取aaa元素距离body的距离

documentgetelementbyid("ddhdh")innerHTML 可以获取到div中的全部数据,包括标签。。。但是只是在IE和OPERA中使用

documentgetelementbyid("ddhdh")innerTEXT 可以获取到div中的文本数据,不会获取到标签。。。但是只是在IE和OPERA中使用

documentgetElementById(“text”)textContent 用于在火狐中获取数据

indexof用法

strObjindexOf(subString,[ startIndex])

参数

strObj

必选项。String 对象或文字。

subString

必选项。要在 String 对象中查找的子字符串。

starIndex

可选项。该整数值指出在 String 对象内开始查找的索引。如果省略,则从字符串的开始处查找。

indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。

望采纳~

js 怎样获取字型的宽度和高度 比如9pt这样大小的文字

字型的高宽,这个没法量的,因为好多字型,不同字元下大小不一样,比如 a 就是比 i 宽。

我猜你的问题应该是应该是获取一个具有特定字型,字号的字串的宽度和高度吧。

你可以新建一个span标签,隐藏标签,把你的字串放进去,赋上你想要的字型,字号。然后度量这个span的宽度和宽度就好了。这个span的宽高就是字串的宽高。

JS根据字号获取字型的宽度

给元素然后取他的clientHeight就OK了

Java怎么获取字串的宽度和高度, java 能获取到文字所使用某种字型后的宽度及高度吗

字串没有高和宽的概念,这是一个伪命题,请考虑重新修改问题;

如果你值的是在ui上显示字串的控制元件的高和宽,那么需要获取到这个控制元件的例项,然后呼叫控制元件的响应函式,比如getHeight之列的方法来获取你想要的资讯。

8开大小的纸的宽度和高度

宽是555厘米/高是37厘米。绝对正确

190A喷码机怎样调字型的宽度,高度

是金诺的190A吧,调字型的大小只要用滑鼠选中所要调节的字,再根据需要调节字型的大小即可,主要是要用滑鼠选好字了

火狐书签栏怎样改变宽度,高度以及字型的大小

不可以直接调节宽度,但可以把其他栏关闭来增加其宽度,

1、开启浏览器,

2、右键标签栏空白处,

3、出现以下选项,并把外挂栏和其他与其同一行的栏去勾选即可。

怎样获取UIWebView 的文字的高度

#import"ViewControllerh"

@interfaceViewController()

@property(nonatomic,strong)UIWebViewwebView;

@end

@implementationViewController

- (void)viewDidLoad {

[superviewDidLoad];

_webView= [[UIWebViewalloc]initWithFrame:CGRectMake(0,0,selfviewframesizewidth,1)]; 1随便多少,不能为0

_webViewdelegate=self;

[selfviewaddSubview:_webView];

_webViewscalesPageToFit=YES;

NSURLRequestrequest =[NSURLRequestrequestWithURL:[NSURLURLWithString:@":1921681123:3199/5/Html5Article/ArticleDetailaid=7e15de0a-20be-11e6-a7ad-78e3b5a9d432"]];

[_webViewloadRequest:request];

}

- (void)webViewDidFinishLoad:(UIWebView)webView{

CGFloatsizeHeight = [[webViewstringByEvaluatingJavaScriptFromString:@"documentbodyoffsetHeight;"]floatValue];

NSLog(@"contentWebView sizeHeight====%f",sizeHeight 05); 05自认为是画素的问题

1039pt=多少大小的字型

1pt=03514(美国,日本)

1pt=03528(美国)

103903514=365

3654=146Q

15Q就可以了

textview中每个文字的高度和宽度,有办法获取吗

webviewgetContentHeight(); 获取内容高度 获取内容宽度的话。。除非通过js伺服器那边返回,,

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery。

2、其次在indexhtml中的<script>标签,输入js代码:

documentbodyinnerText = $(window)height();

3、浏览器运行indexhtml页面,此时会通过jquery获取到窗口高度“743”并打印出。

网页可见区域宽: documentbodyclientWidth

网页可见区域高: documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽: documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高: documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上: windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高: windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度: windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;

<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=0">

<body onselectstart="return false">

white-space: pre-wrap;

-webkit-tap-highlight-color: transparent;

注意到“pre-wrap”属性值:保留空白符序列,但是正常地进行换行。

white-space:pre-wrap;

filter: brightness(100); 变白

第二行变第一行不变

body{}

小程序上fixed成功过

一般这种都让ios或者安卓端禁止掉,然后在有d性需求的页面添加样式

overflow-y: scroll;

-webkit-overflow-scrolling : touch;

即可

-webkit-overflow-scrolling: touch;

//小程序 h5 交互

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性:

1 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。

2 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,

为第二个手指的触摸点,因为第二个手指是引发事件的原因

3 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值

4 手指滑动时,三个值都会发生变化

5 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。

6 手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,

此值为最后一个离开屏幕的手指的接触点。

3touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数,结果直接使用epreventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数

touchmove:function(e,参数一){

var e=arguments[0]

epreventDefault()

}

webpack-config dev-server 添加 disableHostCheck: true,

html的font-size还没设置的时候展示的样式是错误的

关于获取各种浏览器可见窗口大小的一点点研究

经本地测试和研究再次对 documentdocumentElementclientWidth 进行解释:

每一个html文件在浏览器中都会被解析为一个页面,documentdocumentElementclientWidth则是获取本页面的宽度。

下面进行举例子说明:

1) 如果在浏览器全屏,并且打开的一个标签页中只包含一个页面,则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度:即windowscreenavailWidth;

2)当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面:则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度!=屏幕可用工作区宽度:即windowscreenavailWidth;

3)当打开的一个标签页中不只包含一个页面:比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面,如下所示

则iframe指向页面的documentdocumentElementclientWidth不再等于浏览器宽度,而是等于ifame的宽度

以上就是关于如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度全部的内容,包括:如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度、我想用js获取一张图片的宽度和高度 请问怎么能获取 图片在<img>标签中、如何获取div距离浏览器顶部的高度,宽度,内容等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9668315.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存