这是我的情况.
我有一个名为的文件iframe.html,其中包含图像幻灯片的代码.代码有点像
<html>
<head>
<!-- Have added title and js files (jquery, slideshow.js) etc. -->
</head>
<body>
<!-- Contains the images which are rendered as slidehow. -->
<!-- have hierarchy like 'div' inside 'div' etc. -->
</body>
</html>
用户可以使用嵌入代码将幻灯片添加到他们的博客或网站(可以来自不同的域).假设用户必须嵌入幻灯片index.html,他们可以通过添加以下行添加:
<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>
这将从带来完整的HTML代码iframe.html来index.html,现在我需要一种方法来访问iframe来调整它们的一些属性的元素.
与代码一样,iframe的宽度和高度由用户设置为某些修复尺寸.我想将幻灯片显示的大小(以及包含的图像)调整为iframe容器的大小.做这个的最好方式是什么？
我尝试过没有成功从index.html类似的东西访问iframe组件
$('#iframe').contents();
但得到错误:
TypeError:无法调用null的方法'contents'
因此,我认为iframe.html在幻灯片应该检查父级的宽度和高度并相应地设置其高度的位置实现逻辑.
我很困惑,希望我的问题对大多数人都有意义.请随时询问进一步的解释.非常感谢您的帮助.
Kna*_*ģis 56
该行将检索框架的整个HTML代码.通过使用其他方法而不是innerHTML您可以遍历内部文档的DOM.
document.getElementById('iframe').contentWindow.document.body.innerHTML
要记住的是,仅当帧源位于同一域时,这才有效.如果它来自不同的域,跨域脚本(XSS)保护将启动.
Cha*_*ala 42
试试这段代码:
$('#iframe').contents().find("html").html();
这将返回iframe中的所有html.而不是.find("html")你可以使用你想要的任何选择器,例如:.find('body'),.find('div#mydiv').
var iframe = document.getElementById('iframe');
$(iframe).contents().find("html").html();
| 归档时间： |
|
| 查看次数： |
165671 次 |
| 最近记录： |