我正在尝试将数据从eBay提取到iframe。问题在于它不调整其内容物的高度,并在下面留出很大的空隙。我尝试采用iframe主体的offsetHeight,但是由于它是CROSS-DOMAIN,因此无法从中提取任何属性。请让我知道是否有任何方法可以通过JS甚至CSS来实现。 我已经尝试过从StackOverflow可以找到的所有内容,但似乎不适用于这里。
<script>
function onLoad() {
console.log(
"height",
document.getElementById("target").contentWindow.document.body.offsetHeight
);
}
</script>
<div class="test">
<iframe
id="target"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"
onload="onLoad()"
class="iframe"
frameborder="0"
height="auto"
width="100%"
src="https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1"
title="Sellers description of item"
></iframe>
</div>
答案 0 :(得分:1)
有一种方法可以实现,但是您将需要使用代理进行跨域请求。您可以使用PHP执行此操作。使用以下代码创建一个php文件-content.php:
<?php
$queryString = substr($_SERVER["QUERY_STRING"], 4);
$fileContents = file_get_contents($queryString);
echo $fileContents;
?>
上面的代码是PHP中的一个简单的代理服务器,用于消除cors问题。
您的HTML将如下所示:
<div id="iframeHolder">
<iframe id="iframe"
onload='iframeResizer()'
scrolling="no"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
src="content.php?url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1" height="100%" width="100%" ></iframe>
</div>
<script type="text/javascript">
function iframeResizer(){
let iframeHolder = document.getElementById('iframeHolder')
let iframe = document.getElementById('iframe')
let iframeHeight
let iframeHolderHeight
iframeHeight = iframe.contentWindow.document.body.offsetHeight;
console.log(iframeHeight)
iframeHolderHeight = iframeHolder.style.height = iframeHeight + 'px'
}
</script>
css类似于:
#iframeHolder{
height: 100%;
position: relative;
}
iframe{
position: absolute;
height: 100%;
top: 0;
left: 0;
}
在这里,您将URL传递到content.php页面,它将在其中解析请求并返回响应。由于content.php具有相同的来源,因此可以解决cors问题。
P。 S .: $ queryString = substr($ _ SERVER [“ QUERY_STRING”],4);
PHP中的这段代码是因为$ _SERVER [“ QUERY_STRING”]将是
url = https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item = 383383822672&t = 0&tid = 310&category = 171228&seller = walrus_0&excSoj = 1&excTrk = 1&lsite = 3&ittenable = false&domain = ebayheadga。 = 1&oneClk = 2&secureDesc = 1
由于前缀'url =',这是无效的URL。 substr()函数将其删除。
答案 1 :(得分:0)
您可以使用以下库:iframe-resizer
它使您可以自动调整跨域iFrame的高度和宽度,以适合其包含的内容。