使用 ajax 在 iframe 中加载内容

Posted

技术标签:

【中文标题】使用 ajax 在 iframe 中加载内容【英文标题】:load content inside iframe using ajax 【发布时间】:2011-03-30 03:47:24 【问题描述】:

我有在服务器端工作的 iframe:

<iframe frameborder="0" runat="server" style="width: 100%; height: 700px; background-color: #bacad3;" id="I1" name="I1" src="Page.aspx"></iframe>

我使用此代码动态更改内容:

protected void Button1_Click(object sender, EventArgs e)
       
   I1.Attributes["src"] = "Page.aspx";

我想用ajax通过以下方式实现它:

    当用户点击 iframe 的外侧时,不要回发页面并更改 iframe 的 src 我想在进度更新面板中显示进度

我提到它我不想运行任何回发,只是通过在 iframe 外部调用来使用 ajax 在 iframe 内加载页面,例如页面中有一个按钮,它由更新面板处理,它加载其他页面的内容在 iframe 里面。 有人可以帮我吗?

【问题讨论】:

【参考方案1】:

使用 onClientClick 和 mmke 确保您返回 false 以取消回发。

window.frames["frameName"].src = "http://example.com";
//or
document.getElementById("iframeId").src = "http://example.com";

如果您使用 runat=server,您可能需要使用客户端 ID

document.getElementById("<%= iframeId.ClientID %>").src = "http://example.com";

【讨论】:

谢谢,但问题是你的回答不完整,如果可能的话我可以实现这个东西,请评论一些参考或示例链接我没有 onClientClick 的任何背景你只是说 onClientClick 和制作确保您返回 false 以取消回发我使用服务器端组件,并且我想在进度更新面板中显示 iframe 内加载页面的进度,所以您说但很短我无法理解 它再次回发,它不能正常工作我想在 iframe 中加载新页面时删除回发,但现在这个对我没有任何作用 MSDN 文档很棒 msdn.microsoft.com/en-us/library/…【参考方案2】:

我发现使用这种方法是不可能的,你不能删除回发它需要像谷歌邮件(gmail)这样的代理方法,当你点击收件箱时它会出现在右边没有回发但我们不能用这种方法实现。

【讨论】:

以上是关于使用 ajax 在 iframe 中加载内容的主要内容,如果未能解决你的问题,请参考以下文章

使用 ajax 在 IFRAME 中加载页面

Javascript iframe 未在引导弹出窗口中加载(模式)

如何通过 AJAX 在 div 中加载 iFrame

访问iframe[javascript][DOM][iframe][for twitter]中加载的页面的DOM

Google Docs Viewer 偶尔无法在 iframe 中加载内容

内容安全策略框架祖先。 iframe 不会在 iOS10 中加载内容