这是我的情况.
我有一个名为的文件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在幻灯片应该检查父级的宽度和高度并相应地设置其高度的位置实现逻辑.
我很困惑,希望我的问题对大多数人都有意义.请随时询问进一步的解释.非常感谢您的帮助.
我希望在其他所有(其他JavaScript函数和CSS)运行之后调用JavaScript函数.此函数更改我正在创建的幻灯片的CSS.
我已将该函数添加到我的HTML文件中:
function loadFullSlideShow {
alert('If I remove this alert this would not work');
$('#background').width('100%');
$('#background').height("auto");
$('#slide_area').width('100%');
// alert('This alert ensure application of CSS with code below');
$('#slide_area').height("auto");
$('img').width('98%');
$('img').height('auto');
$('#thumb_container').width('100%');
$('#thumb_container').height('auto');
$('#controls').css('top', $('img').height());
$('#caption_credit_footer').css('top', ($('img').height() + 18));
});
我希望在所有其他脚本完成加载后调用此函数.令人惊讶的是,当我调用alert代码的第一行并单击OK警告框时,将应用CSS中的更改.但是,当我删除警报时,不会应用更改.
我怀疑当我删除alert代码时,在其他一些JavaScript代码之前执行.如何确保此代码在页面加载结束时运行？
我试过在很多方面调用这个函数:
$(window).bind("load", function() { loadFullSlideShow() });$(window).on("load", function() { loadFullSlideShow() });window.load(function() { loadFullSlideShow()});$(function() { loadFullSlideShow() });<script type="text/javascript" defer="defer"></script>.编辑:我正在使用jQuery JavaScript库的jPlayer插件.