我在iframe里写了<div>标签。宽度设的是100%,却不能充满整个屏幕。而且<div>标签外部的<body>宽度是100%.
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我在iframe里写了<div>标签。宽度设的是100%,却不能充满整个屏幕。而且<div>标签外部的<body>宽度是100%.相关的知识,希望对你有一定的参考价值。
参考技术A 你看iframe的标签是不是充满整个屏幕。如果iframe的body是的宽度是100%那么只有iframe本身或者有限制了iframe的元素限制了宽度。 参考技术B iframe里面的所有元素, 最大宽度是不会超过iframe的. 这是"硬性规定".并不是像其它的容器元素, 比如div, 可以用过修改overflow来适应内部元素.
如何滚动到 iframe 中的特定 div?
【中文标题】如何滚动到 iframe 中的特定 div?【英文标题】:How do you scroll to a specific div in an iframe? 【发布时间】:2017-08-13 08:34:07 【问题描述】:我有一个带有 iframe 的 div,如下所示:
<div>
<iframe ng-src="somesourceurl"></iframe>
</div>
由 iframe 加载的源代码具有带有唯一标识的 div 标签的 html,如下所示:
<div id="n_1">
<div id="n_2" />
<div id="n_3" />
<div id="n_4">
<div id="n_5" />
</div>
</div>
我还有一堆按钮,它们对应于这些唯一标记的 div 中的每一个,如下所示:
<button onclick="goToN1()">Go To n1</button>
<button onclick="goToN2()">Go To n2</button>
<button onclick="goToN3()">Go To n3</button>
<button onclick="goToN4()">Go To n4</button>
<button onclick="goToN5()">Go To n5</button>
我在我的 onclick 函数中为这些按钮中的每一个添加了什么,以便它们滚动到 iframe 中的适当位置?
【问题讨论】:
【参考方案1】:我认为您可以更改iframe
的src
以使浏览器滚动到带有id
的元素:
HTML 1
<div>
<iframe id="my-iframe" ng-src="somesourceurl"></iframe>
</div>
HTML 2
<button onclick="goToId('n_1')">Go To n1</button>
<button onclick="goToId('n_2')">Go To n2</button>
<button onclick="goToId('n_3')">Go To n3</button>
<button onclick="goToId('n_4')">Go To n4</button>
<button onclick="goToId('n_5')">Go To n5</button>
JavaScript
function goToId(id)
var iframe = document.getElementById("my-iframe");
var src = iframe.src;
if(src.indexOf('#') >= 0) src = src.substr(0, src.indexOf("#"));
iframe.src = src + "#" + id;
【讨论】:
我建议在您的代码中将onclick
更改为 ng-click
。
@Mistalis 为什么??以上是关于我在iframe里写了<div>标签。宽度设的是100%,却不能充满整个屏幕。而且<div>标签外部的<body>宽度是100%.的主要内容,如果未能解决你的问题,请参考以下文章
我在HTML中写了一个<ul><li>标签 ,怎麼把数据库的数据动态动态生成到标签里面??php
使用 jQuery 按比例调整 iframe 的大小以适合 DIV
使用 jQuery 按比例调整 iframe 的大小以适合 DIV
如何在一个div标签里显示出另一个网页? <iframe src=" http://www.baidu.com " width="800px" hei