如何运行基于 iframe 源的 JavaScript 函数？答案

【问题标题】：How can I run a JavaScript function based on an iframe's source?如何运行基于 iframe 源的 JavaScript 函数？
【发布时间】：2013-11-30 09:05:01
【问题描述】：

注意：当 iframe 的源发生更改时，我看到了一些关于运行 JavaScript 的答案。我正在尝试在页面加载时运行 JavaScript 函数来更改标题。

基本上，下面的 $(document).ready 函数有一个 if 语句，它似乎没有从我的 iframe 中正确读取源代码。

具体来说，这个“if(document.getElementById("obj").src == '/apex/MyDocumentsMobile')”语句没有做我认为应该做的事情，断言框架源确实是' /apex/MyDcoumentsMobile'

$(document).ready(function() {
    if(document.getElementById("obj").src == '/apex/MyDocumentsMobile'){
        alert('wow'); //this doesn't work. I know my iframe has this src ,though.
        headerChanger('Documents');
    }
    $(".app-wrapper").delay(500).fadeIn(500); //this works, so my page fades in
});


//This function is called on other parts of the page and changes the header text just fine
function headerChanger(heady){
    head = heady;
    var element=document.getElementById("headText");
    element.innerHTML=heady;
}

        <iframe id="obj" src="/apex/MyDocumentsMobile" style="height:8000px;width:100%;position:relative;-webkit-overflow-scrolling: touch; " >
      </iframe>

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

我建议尝试调试的一件事是提醒实际的页面源，如下所示：

alert(document.getElementById("obj").src)

我在这个 JSFIddle http://jsfiddle.net/U95RA/ 上执行了此操作，如您所见，即使 IFrame URL 设置为相对路径，当您请求源时，它也会返回完全限定的 URL (http://{domain }/path 而不仅仅是 /path)。

您可以使用正则表达式来检查 URL 是否以您期望的路径结尾：

if(document.getElementById("obj").src.match(new RegExp('/apex/MyDocumentsMobile' + "$"))){

另外，为了更好的安全性（如果有人访问以该路径结尾但位于不同域的 URL，该怎么办），我建议您更改检查以包括协议和域：

if(document.getElementById("obj").src == 'http://whatever.com/apex/MyDocumentsMobile')

【讨论】：