得到相互矛盾的信息,希望他们不是.我无法想象它的支持会停止,因为很多网站都使用它们.
关于此的一些其他问题:
我有下面的示例代码.这适用于除移动设备上的浏览器之外的所有浏览器.
溢出标记是问题.
适用于所有移动设备以外的设备
margin: 0; padding: 0; height: 100%; overflow: hidden;
适用于所有移动设备而非计算机:
margin: 0; padding: 0; height: 100%;
让它在两者上工作的最佳方法是什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
</style>
</head>
<body>
<iframe width="100%" height="100%" src="http://www.cnn.com" />
</body>
</html>
有没有一种从iframe获取当前URL的简单方法？
观众将经历多个站点.我猜我会在javascript中使用一些东西.
导轨4次出现设置的默认值SAMEORIGIN的X-Frame-OptionsHTTP响应报头.这非常适合安全性,但它不允许您的应用程序的某些部分iframe在不同的域中可用.
您可以X-Frame-Options使用以下config.action_dispatch.default_headers设置覆盖全局值:
config.action_dispatch.default_headers['X-Frame-Options'] = "ALLOW-FROM https://apps.facebook.com"
但是,如何仅针对单个控制器或操作覆盖它？
iframe ruby-on-rails http-headers x-frame-options ruby-on-rails-4
当有人点击单选按钮时,我正在尝试更改iframe src.由于某种原因,我的代码无法正常工作,我无法弄清楚原因.这是我有的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script>
function go(loc) {
document.getElementById('calendar').src = loc;
}
</script>
</head>
<body>
<iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
<form method="post">
<input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
<input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
<input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
</form>
</body>
</html>对我来说,iframe是纯粹的邪恶(好吧,也许不是那么纯粹).他们似乎遇到了很多麻烦.是的,您的整个网站将加载一次,然后您只需加载一个页面.但人们为此目的发明了AJAX.
我发现的最大问题之一iframe是我无法将链接粘贴到其中一个子页面,因为URL从未更改(是的,我知道有一个解决方法).其次,网络搜索引擎可能有问题正确索引网站.
有时这些网站的可访问性更差,有些浏览器甚至可以不正确地显示它们.
有更好的方法来设计没有(i)帧的布局.每天我都可以看到有人问过SO问题,比如"如何使用jQuery访问iframe？".
那么iframe的好处是什么？还有什么理由继续使用它们？我只是想知道为什么:)
(因为它不是一个真正的问题,它是一个CW)
我有一个项目,我需要使用JavaScript创建一个<iframe>元素并将其附加到DOM.之后,我需要在<iframe>中插入一些内容.它是一个嵌入第三方网站的小部件.
我没有设置<iframe>的"src"属性,因为我不想加载页面; 相反,它用于隔离/沙箱插入我插入的内容,以便我不会遇到CSS或JavaScript与父页面冲突.我正在使用JSONP从服务器加载一些HTML内容并将其插入此<iframe>.
我有这个工作正常,有一个严重的例外 - 如果在父页面中设置document.domain属性(它可能在部署此小部件的某些环境中),Internet Explorer(可能是所有版本,但我已经当我尝试访问我创建的<iframe>的文档对象时,在6,7和8中确认给了我"访问被拒绝"错误.它不会在我测试的任何其他浏览器中发生(所有主要的现代浏览器).
这是有道理的,因为我知道Internet Explorer要求您将所有窗口/框架的document.domain设置为相互通信到相同的值.但是,我不知道有任何方法可以在我无法访问的文档上设置此值.
是否有人知道这样做的方法 - 以某种方式设置此动态创建的<iframe>的document.domain属性？或者我不是从正确的角度看待它 - 有没有另一种方法可以实现我的目标而不会遇到这个问题？我确实需要在任何情况下使用<iframe>,因为隔离/沙盒窗口对于此小部件的功能至关重要.
这是我的测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page's document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to …我目前正在处理一个表单,除了表单的所有正常字段外,还有上传图片的文件输入,onchange将图片提交给iframe,然后将上传的图片加载到带有要修改的字段的表单中对于他们(如名称和地理定位).由于我无法嵌套表单,file_input也包含在iframe中,所以最后我在iframe中使用了iframe.如此示意,我有这样的事情:
<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>
和iframe中加载的html类似(忽略html,head和body标签)
<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>
这很好用,除了加载第一个iframe需要几秒钟,因此文件输入不会加载到页面的其余部分,并且在视觉上并不理想.我可以解决这个问题,如果可以指定iframe内容而无需加载另一个页面(在第一个iframe中由'file_input_url'指定).
所以,我的问题是,有没有办法在同一个文档中指定iframe内容,或者只能用src属性来表示,所以需要加载另一个页面？
你如何阻止Firefox和Safari缓存iframe内容？
我有一个简单的网页,其中包含iframe到不同网站上的网页.外部页面和内部页面都有HTTP响应头以防止缓存.当我单击浏览器中的"后退"按钮时,外部页面正常工作,但无论如何,浏览器总是检索iframed页面的缓存.IE工作正常,但Firefox和Safari给我带来了麻烦.
我的网页看起来像这样:
<html>
<head><!-- stuff --></head>
<body>
<!-- stuff -->
<iframe src="webpage2.html?var=xxx" />
<!-- stuff -->
</body>
</html>
该var变量总是变化.尽管iframe的URL已更改(因此,浏览器应该向该页面发出新请求),但浏览器只是获取缓存的内容.
我已经检查了来回的HTTP请求和响应,我注意到即使外部页面包含<iframe src="webpage2.html?var=222" />,浏览器仍然会获取webpage2.html?var=111.
这是我到目前为止所尝试的:
我无法做任何JavaScript技巧,因为我被同源策略阻止了.
我的想法已经不多了.有谁知道如何阻止浏览器缓存iframed内容？
我安装了Fiddler2,因为Daniel建议再进行一次测试,不幸的是,我仍然得到了相同的结果.
这是我进行的测试:
Math.random()在JSP中使用随机数生成.通过此测试,我能够确切地看到哪些页面正在更新,以及哪些页面被缓存.
为了快速测试,我加载页面,导航到另一个页面,然后按"返回".结果如下:
原始页面:
离开页面,然后回击:
这表明内部页面正在被缓存,即使外部页面在URL中使用不同的GET参数调用它.出于某种原因,浏览器忽略了iframe请求新URL的事实; 它只是加载旧的.
果然,Fiddler证实了同样的事情.
(我加载页面.)
外页被调用.HTML:
0.21300034290246206
<iframe src="http://ipv4.fiddler:1416/page1.aspx?var=0.21300034290246206" />
http://ipv4.fiddler:1416/page1.aspx？var = 0.21300034290246206被调用.
(我离开页面,然后回击.)
外页被调用.HTML:
0.4470929019483644
<iframe src="http://ipv4.fiddler:1416/page1.aspx?var=0.4470929019483644" />
http://ipv4.fiddler:1416/page1.aspx？var = 0.21300034290246206被调用.
好吧,从这个测试中,看起来好像Web浏览器没有缓存页面,但它正在缓存iframe的URL,然后在该缓存的URL上发出新请求.但是,我仍然难以理解如何解决这个问题.
有没有人对如何阻止Web浏览器缓存iframe URL有任何想法？
我有一个帮助页面,help.php,我加载一个iframe里面main.php我怎样才能得到这个页面的高度,一旦它在iframe中加载？
我问这个是因为我无法将iframe的高度设置为100%或auto.这就是为什么我认为我需要使用javascript ..我正在使用jQuery
CSS:
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}
JS:
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})
HTML:
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" …