如何使用 Jquery 在 iframe 中加载 url

Posted 2023-05-09

【中文标题】如何使用 Jquery 在 iframe 中加载 url

【英文标题】：How do I load an url in iframe with Jquery

【发布时间】：2011-11-02 20:58:36

【问题描述】：

我想在点击时加载一个 iframe，这是我目前所拥有的：

$("#frame").click(function ()  
      $('this').load("http://www.google.com/");
    );

它不起作用。这是完整的代码：JS Bin

【问题讨论】：

你真的必须使用 iframe 吗？我相信有人会帮助你完成这项工作，但你应该尽可能避免使用 iframe。

***.com/questions/362730/…

我真的需要使用 iframe :)

好吧，我刚才提到你这样做是对的，很高兴你找到了正确的答案。

【参考方案1】：

$("#button").click(function ()  
    $("#frame").attr("src", "http://www.example.com/");
);

html：

 <div id="mydiv">
     <iframe id="frame" src=""  >
     </iframe>
 </div>
 <button id="button">Load</button>

【讨论】：

跨浏览器限制不允许你这样做。

如何优雅地处理错误？例如，我们有一个生成 PDF 文档的报告引擎，我们将其加载到一个隐藏的 iframe 中，该 iframe 应该会自动让用户下载它，但是有可能会出现问题，我们想通知用户这个问题.

@Jacques：为您的自定义需求编写您自己的逻辑。以上答案非常适合OP的问题。

@Jacques 你是如何解决这个问题的？我遇到了你描述的同样的问题

@JasonKrs 不幸的是我不记得了，因为这是很久以前的事了。抱歉，我帮不上什么忙。

【参考方案2】：

试试$(this).load("/file_name.html");。此方法针对本地文件。

您还可以针对远程文件（在另一个域上）查看：http://en.wikipedia.org/wiki/Same_origin_policy

【讨论】：

他的短语中的“this”指的是域“www.google.com”

【参考方案3】：

$("#frame").click(function ()  
    this.src="http://www.google.com/";
);

有时纯 javascript 比 jQuery 更酷、更快 ;-)

【讨论】：

是的，请解释一下这个上下文中的“this”是什么。

@AlexGrande "this" 与问题中的相同 - 您正在点击的 iframe。我正在回答一个具体问题，在这种情况下，唯一存在的元素是 iframe。

对不起，我指的是最高的答案。

我们可以在调用 url 中发送 header 吗？我有服务器端 php rest，它为客户端返回报告为 html。这很奇怪，但我想在调用此页面时将 jwt 作为标题发送。我想在 webkit 中将此页面作为 iframe 打开。我可以将 jwt 附加到标题吗？

然而，你刚刚使用了 jQuery

【参考方案4】：

这里是 iframe：

<iframe class="img-responsive" id="ifmReport"   >

    </iframe>

在脚本中加载它：

 $('#ifmReport').attr('src', '/ReportViewer/ReportViewer.aspx');

【参考方案5】：

以防万一有人仍然偶然发现这个老问题：

代码理论上在某种意义上几乎是正确的，问题是使用 $('this') 而不是 $(this)，因此告诉 jQuery 查找标签。

$(document).ready(function()
  $("#frame").click(function ()  
    $(this).load("http://www.google.com/");
  );
);

脚本本身不会像现在这样工作，因为 load() 函数本身是一个 AJAX 函数，谷歌似乎并没有特别允许使用 AJAX 加载这个页面，但是这个方法应该是易于使用，以便通过使用相对路径从您自己的域加载页面。