从 iframe 本身内的另一个页面延长 iframe答案

【问题标题】：Lengthening an iframe from another page within the iframe itself从 iframe 本身内的另一个页面延长 iframe
【发布时间】：2014-05-25 17:47:40
【问题描述】：

我目前正在为学校制作网站，但我很缺乏经验。
我遇到的问题是：

我的主页上有一个 iframe，我希望根据点击的链接来延长它。
这部分很简单，但是当点击 in 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，以便在第二页上使用它。

【问题讨论】：

document.all 和 document.layers?为什么你的代码因支持 IE 4 和 Netscape 4 而膨胀？他们是死浏览器。
这是我老师提供的脚本，我有义务使用它。这很愚蠢，但是是的。别无选择

标签： javascript html iframe

【解决方案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

如果您在本地运行它，您将需要一个虚拟服务器。那里有很多非常容易运行的东西。 :)

【讨论】：

正如我所说，我对此非常缺乏经验，并且在第一行代码之后我什么都不懂。如果这可行，哇。
添加了一些 cmets 来帮助你。 :)
非常感谢！我让它工作了！这对我来说意味着世界，谢谢！
没问题。希望一切顺利。 :)

【解决方案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 加载示例：iFrame src change event detection?

【讨论】：

我不太明白，同一个域是什么意思？ onload 事件不起作用，因为单击按钮时它不会重新加载
同理，如果 iframe 设置为 www.google.com，您将无法访问它。但是，如果它是 www.yourdomain.com 就可以了。你打算在 iframe 中加载什么？
单击导航列表中的链接后，会在其中加载包含信息的页面。在这个页面中有一个按钮，它使 div 可见。为了使这个 div 适合 iframe 需要更高 =/
“信息页面”从何而来？
想象一个文件夹：Home.html、Infopage.html、Hometxt.html 以 hometxt 作为 iframe 源。该脚本位于 Scripts/ 文件夹中