使用 JQuery 加载 iframe（正确方法）

Posted 2023-02-22

【中文标题】使用 JQuery 加载 iframe（正确方法）

【英文标题】：Loading an Iframe With JQuery (Correct Method)

【发布时间】：2012-04-30 13:50:13

【问题描述】：

使用 JQuery 加载 iframe 的正确方法是什么？

实际上，我有一个包含多个链接的菜单，并且我想在用户单击它时将每个链接加载到 Iframe 中。我在一个 ASP.NET 网站上工作，我的默认页面里面有这个菜单和 iframe。

我使用了 Target="IframeName" 但由于其他一些问题我不想要这种方法。

所以请告诉我如何创建一个 JQuery 函数来加载这样的 iframe。 我搜索了它，找到了几种方法，但似乎没有一种方法有效，我对此感到震惊，而且我无法理解哪种方法是正确的。

【问题讨论】：

它的“其他问题”是什么。目标方法是正确的，不需要 javascript 即可工作。如果您展示了“几种方法”，请提供帮助。

我知道目标方法是正确的，但如果你能告诉我一些通过 JQuery 实现的方法，那将非常有帮助

【参考方案1】：

Iframe HTML 代码

<iframe id="myIframe" name="myIframe"></iframe>

jQuery

jQuery("#myIframe").attr("src","newPage.html");

JavaScript

document.getElementById("myIframe").src = "newPage.html";

HTML 链接

<a href="newPage.html" target="myIframe">FOO</a>

表单提交

<form action="newPage.html" target="myIframe">
    <input type="submit" name="btnSubmit" value="clicky"/>
</form>

【讨论】：

好吧我用这个方法来调用 Welcome​​ton> 在头部我有一个函数 我现在做错了什么？

您没有取消点击链接。需要返回 false 并删除 JavaScript 标签。 OnClientClick="Navigate('ff');return false;"

Welcome​​ton> 现在我正在做这仍然无法正常工作，它有什么问题，请有人告诉我如何突出显示代码:(

哦，我弄错了，我在做“url”

非常感谢你们，整个问题都解决了……我不知道为什么我不能用“目标方法”做同样的事情，特别感谢“epascarello”回答我的愚蠢问题我无法投票给你的答案，因为我的声誉低于 15，对此感到抱歉:(

【参考方案2】：

$('#iFrameName').load('somefile.html');

这会选择 iframe（您需要 iframe 标签中的 id="iFrameName" 等）并将文件加载到其中。但是，您可以只在 a href 上使用 target 属性。我看到您提到有问题...您的 html 的 DOCTYPE 是什么？您在使用基本 a href 时遇到了什么问题？

【讨论】：

这是我的 DOCTYPE ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

此外，目标方法的问题在于 - 每当我将普通页面（没有任何脚本）发送到我的 iframe 时，它​​都可以正常工作，但是当我发送包含 Javascript 文件的特定页面时，其主要目的是为 API 创建 HTTP 请求并以表格的形式生成响应。然后在显示整个结果后，我的 iframe 开始表现得很奇怪，因为它打开了我在新选项卡中单击而不是在其中打开的每个链接

这个东西在 Mozilla 上工作得非常好，它总是能正确加载，但我不知道为什么我的 iframe 在使用这个 Javascript 后会丢失 src 的轨迹。这个 JQuery 文件没有什么特别之处，如果有帮助，我也可以显示我的 Javascript 文件？？

是的，如果在 iframe 中加载的文件正在写回自身，则该文件内的所有链接都需要以 _self 为目标，这样可能会变得混乱。如果您可以发布一些 javascript 或至少一个加载页面的示例，那可能会有所帮助

为什么要用 Ajax 加载 iframe？奇怪的解决方案。