我工作场所的网站环境:
主文件是index.html,javascript用于更改文件中使用的对象元素的数据属性。然后在Javascript中克隆该对象以使其在data属性更改时呈现自身(是的,hackish,但工作正常)然后通过onload属性调用javascript以将该对象元素的大小调整为与其内容相同的高度
这类似于iframe元素的旧HTML用法,但是XHTML 1.1严格符合对象。不幸的是,在object元素中使用属性onload会破坏XHTML 1.1验证。
所以我想通过为onload或者object元素的onready状态添加一个监听器来将该功能移到我的javascript文件中。我可以让onload监听器在文档或窗口或课程上工作,但让它在object元素上工作是不行的。
我唯一要排除故障的想法是在复制对象元素时再次添加侦听器。例如,当我复制该元素时,该侦听器是否丢失了?
请不要使用jquery解决方案(避免使用这个独立站点的外部库)。
提前致谢!
html文件部分......
<object id="mainContent" type="text/html" data="home.html"
standby="Loading..." onload="resizeObject(this);"></object>
javascript来克隆和调整大小......
function navigateTo(page)
{
var objectContent = document.getElementById('mainContent');
objectContent.setAttribute('data', page);
var menus = document.getElementsByClassName('dropdownMenu');
var i;
for (i = 0; i < menus.length; i++)
{
menus[i].setAttribute('class', 'dropdownMenu hidden');
}
//clone and replace object element in order for it to update the DOM
var temp = objectContent.cloneNode(true);
objectContent.parentNode.replaceChild(temp, objectContent);
}
function resizeObject(obj)
{
var h = obj.contentWindow.document.body.scrollHeight;
if (h < 500)
{
h = 650;
}
h = h + 100;
obj.style.height = h + 'px';
}
听众示例不起作用......
var Content = document.getElementById('contentMain');
Content.addEventListener("click", function()
{
resizeObject(Content);
});