Question

我目前正在为学校建立一个网站，而且我很缺乏经验我遇到的问题是：

我在主页上有一个iframe，根据点击的链接，我想让它更长这部分很简单，但是当点击中的链接时，iframe的长度不会更长。

所以我有一个我做的外部脚本

function getObj(name) { if (document.getElementById) { this.obj = document.getElementById(name); this.style = document.getElementById(name).style; } else if (document.all) { this.obj = document.all[name]; this.style = document.all[name].style; } else if (document.layers) { this.obj = document.layers[name]; this.style = document.layers[name]; } } var frame, div1; function mainInit(){ frame = new getObj("idFrame"); } function init2(){ div1 = new getObj("divWithTable"); div1.style.visibility = "hidden"; } function ShowDiv(){ div1.style.visibility = "visible"; //frame.obj.height = 1000; }

所以我的主页上有<body onload="mainInit()">，iframe页面上有<body onload="init2()">，其中还有一个onclick="ShowDiv()"的按钮。

现在的问题是：
当我单击一个在页面中显示div的按钮时，我无法更改iframe的长度。我需要以某种方式从第一页返回定义的iframe，所以我可以在第二页使用它。

Answer 1

如果您使用相同的来源，则应该能够访问这些链接并为其附加功能。：）

// Find the iframe (in this case by it's tag <iframe>)
var iframe = document.getElementsByTagName('iframe')[0];
// Get the content of the iframe
// The || means or, this is to account for the way different browser allow access to iframe content
// If you cant get the contentDocument, then it'll give you the contentWindow.document 
var iframeContent = iframe.contentDocument || iframe.contentWindow.document;

// Finally we get the link elements from the iframe
// In this example all of our links have the class 'my-link', but you could get by tag name <a> (in the same way we got the iframe)
var iframeLinks = iframeContent.getElementsByClassName('my-link');

// Then add your listeners to the links

如果您在本地运行，则需要虚拟服务器。那里有许多非常容易运行的地方。：）

Answer 2

不幸的是，除非iframe的位置与包含文档的域名相同，否则无法拦截iframe中的点击次数。

如果您要使用相同的域名，那么这是一个JQuery解决方案：Add click event to iframe

但是，您可以在iframe更改时检查iframe的位置，然后运行代码来更改iframe大小。

最受支持的方法是在iframe上放置一个onload属性。

<iframe onLoad="runSomeCode()"></iframe>

另一种方式：

document.getElementsByTagName('iframe')[0].onload = function() {
    // Do some stuff
}

此处有几个iframe onload示例：iFrame src change event detection?

从iframe内的另一个页面延长iframe

2 个答案: