垂直展开包含iFrame的DIV [英] Expand DIV vertically that contains an iFrame
问题描述
这是我的代码。基本上，我有一个iFrame的来源可能会改变。我需要包含DIV垂直扩展，以适应iFrame中的任何内容。
我无法让它工作。任何想法？
我的代码
<！DOCTYPE html>
< html>
< head>
< title> Ruby on Rails：欢迎登上< / title>
< / head>
< body>
< div id =page>
< div id =content>
< div id ='commentLoader'style =width：500px;>
< iframe id =commentIframesrc =http://www.amazon.comstyle =border-style：none; width：100％; height：100％>< / iframe> ;
< / div>
< / div>
< / div>
< / body>
< / html>
所有其他方法 / em>，因为......
... Mozilla（以及paislee的评论中指出的所有其他主流浏览器）都有这种名为相同原产地政策规定：
同一来源策略可防止从一个
来源加载的文档或脚本从另一个
来源获取或设置文档属性。
本质上，Mozilla确保您不能通过JavaScript访问其他网页的属性，因为这会带来安全隐患（对于cookie劫持以及我相信这种情况）。
例如，这里是一个类似问题为相同来源的页面调用iframe;这里是答案适用于您的问题。正如你在Firefox的错误控制台中看到的那样，你的拒绝访问属性文档的权限...
好吧，现在你有几个选项可以让你知道你无法通过JavaScript访问iframe的高度（，因为它位于另一个域名上）：
- 更改它因此您可以控制iframe的内容（然后将其放在相同的域中或使用发布在类似问题）。
-
假设1不可行，您必须使用您的服务器访问网页。第一个选项是屏幕刮取iFrame的内容，然后显示它。
您可以使用代理脚本，然后显示代理的iframe（托管在同一台服务器上）;这将允许您访问该网站，就好像我们是您自己的一样，用户也会注意到没有任何区别（注意：我很确定这是违反所有服务条款/可能是非法的，因为用户可以尝试在iframe（即登录）中与网站进行交互（不知道它是通过代理加载的），并且您将实际上成为钓鱼网站） -
我假设在iframe中加载的内容是一组注释（ID有一定的含义），我还会冒昧地假设每个注释都有固定的高度，或者最大高度。在这种情况下，您可以编写一个加载页面的php脚本，计算评论的数量（正则表达式），然后乘以评论高度的数字以确定iframe的适当高度。
祝你好运，
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
- Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
- If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
这篇关于垂直展开包含iFrame的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
