在 iFrame jQuery 中重定向表单提交时未检测到更新的 Src 属性

Posted 2023-05-09

【中文标题】在 iFrame jQuery 中重定向表单提交时未检测到更新的 Src 属性

【英文标题】：Upon Redirect of Form Submission within iFrame jQuery Not Detecting Updated Src Attribute

【发布时间】：2017-11-30 00:22:38

【问题描述】：

所以我在页面 /profile/settings/index.php 上有一个 iframe，我不希望我的用户在更改他们的设置时离开 /profile/settings/index.php。

设置页面会自动加载 iframe-home.php。然后我点击更改名称，它会加载 update.php。然后我提交表单（action=''）以自行提交。更新名称后，它会重定向到 iframe-home.php，但正如您在控制台上看到的那样，它仍然显示 update.php... 这是一段有关内容的视频。

https://www.youtube.com/watch?v=MjALpZkmgWs&feature=youtu.be

这是 iFrame：

<iframe src="iframe-home.php" id="settings-iframe" onload="onLoadHandler();" name="settings-iframe">
</iframe>

每当在这个 iframe 中加载页面“update.php”时，该页面上都会有一个表单。提交该表单后，会在 php 中调用 header() Location 函数，然后将 iframe 重定向到 iframe-home.php（在成功验证等情况下）。但是，在console.log() 上，iframe src 属性没有被更新。 console.log 说我还在 update.php 而不是 iframe-home.php。如果我想按照以下方式做一些事情，这是一个问题：

function onLoadHandler() 
    var $location = $("#settings-iframe").attr("src");
    switch($location) 
        case "iframe-home.php":
            console.log($location);
            activateHome();
        break;
        case "changepassword.php":
            console.log($location);
            activatePassword();
        break;
        case "update.php":
            console.log($location);
            activateName();
        break;

    

不确定您需要为此查看什么代码。我无法真正抽象代码，因为我使用了分布在两种不同编程语言上的大约 10 个不同的类。

激活函数正在更改 css 代码。我已经测试了这些功能，它们按缩进方式工作。 activateX() 突出显示 iFrame 中加载的“活动”页面的导航链接。

我只是想弄清楚如何在标头位置重定向时强制 iframe 重新加载 src 属性，或者至少获取正确的 src 属性。为什么 iframe 告诉我我在 update.php 上，当页面加载它 iframe-home.php...

【问题讨论】：

xy 问题，为什么需要 iframe？

我正在使用 iframe 加载不同的页面，而无需离开 /profile/settings/ 页面。

您是否尝试过为每个 iframe 页面添加唯一的 id 并使用 jquery/javascript 获取？

我已经用我的点击监听器这样做了：// Add the Click Listeners for the buttons $("#home").on("click", function() activateHome(); $("#settings-iframe").attr("src", "iframe-home.php"); ); $("#password").on("click", function() activatePassword(); $("#settings-iframe").attr("src", "changepassword.php"); ); $("#name").on("click", function() activateName(); $("#settings-iframe").attr("src", "update.php"); );

【参考方案1】：

编辑：- 完整的 jQuery 解决方案

<iframe id="settings-iframe" name="settings-iframe"></iframe>

$(document).ready(function() 
    $('iframe#settings-iframe').on('load', function() 
    // var location = this.contentWindow.location.href;
    var location = this.contentWindow.location.href.substr(this.contentWindow.location.href.lastIndexOf('/')+1);
    console.log('location : ', location);
    switch (location) 
        case "iframe-home.php":
        console.log(location);
        activateHome();
        break;
      case "changepassword.php":
        console.log(location);
        activatePassword();
        break;
      case "update.php":
        console.log(location);
        activateName();
        break;
    
  );
);

旧： 尝试这个 ：- var $location = this.contentWindow.location

【讨论】：

代码现在显示为：function onLoadHandler() var $location = this.contentWindow.location;，我收到以下错误：未捕获的类型错误：无法在 htmlIFrameElement.onload ((索引）：101）

我在这里发布一个视频（编辑问题），让你看看发生了什么。这个视频是用你更新的代码完成的。

我的代码有一个小问题，我们需要使用this.contentWindow.location.href而不是jquery attr来定位。请检查console.log 的结果并据此更改您的开关功能，因为this.contentWindow.location.href 给出了完整的url。我已经更正了代码，希望您可以修改开关功能以匹配新位置（完整的 url 不仅仅是文件名）

这行得通！但是，如果我对这个以 localhost 作为我的主机的 URL（localhost/Makoto/profile/settings/iframe-home.php）进行硬编码......当我部署到我的服务器（myurl.com）上时，我会遇到问题。所以现在我们知道这是有效的。我们如何着手将其转变为易于部署的代码？

感谢您的帮助，仍在尝试弄清楚如何使此代码准备好部署。