这是我的情况.
我有一个名为的文件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>
Run Code Online (Sandbox Code Playgroud)
用户可以使用嵌入代码将幻灯片添加到他们的博客或网站(可以来自不同的域).假设用户必须嵌入幻灯片index.html
,他们可以通过添加以下行添加:
<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>
Run Code Online (Sandbox Code Playgroud)
这将从带来完整的HTML代码iframe.html
来index.html
,现在我需要一种方法来访问iframe来调整它们的一些属性的元素.
与代码一样,iframe的宽度和高度由用户设置为某些修复尺寸.我想将幻灯片显示的大小(以及包含的图像)调整为iframe容器的大小.做这个的最好方式是什么?
我尝试过没有成功从index.html
类似的东西访问iframe组件
$('#iframe').contents();
Run Code Online (Sandbox Code Playgroud)
但得到错误:
TypeError:无法调用null的方法'contents'
因此,我认为iframe.html
在幻灯片应该检查父级的宽度和高度并相应地设置其高度的位置实现逻辑.
我很困惑,希望我的问题对大多数人都有意义.请随时询问进一步的解释.非常感谢您的帮助.