向 iframe 发送数据 | CSS-Tricks

Erin

# 2011 年 12 月 1 日

iframe 不是很麻烦/不必要/难看，而且基本上不再使用了吗？

Chris Coyier

评论永久链接# 2011 年 12 月 1 日

有时很麻烦。有时非常有用且必要。“框架”则不那么常见。
Robin

评论永久链接# 2015 年 1 月 29 日

太棒了！非常感谢！
MrBitfly

评论永久链接# 2016 年 12 月 18 日

当需要 CORS 时，iframe 可以成为一种解决方案

Willem de Wit

# 2011 年 12 月 2 日

对于异步发布文件非常有用。

Chris

# 2011 年 12 月 2 日

另一个很棒的小片段，尽管我因为 iframe 的限制而讨厌它，但我确实喜欢操纵它们进行文件上传的能力。

NigelC

# 2011 年 12 月 8 日

奇怪的是，我无法使其工作。

上传了一个非常基本的页面，其中只有表单和 iframe 页面，但它无法工作。

http://www.mercury14.co.uk/asdfgh/form.php

我是否遗漏了某些明显的东西？

Lûhn 的德鲁伊

# 2011 年 12 月 12 日

这是否向所有人显示内容，还是仅在您当前会话中显示？

Lûhn 的德鲁伊

# 2011 年 12 月 13 日

我遇到了同样的问题。我创建了 iframe.php 文件，但没有任何内容显示，而在演示中则显示。请帮忙。

NigelC

# 2011 年 12 月 24 日

如果其他人遇到使此方法工作的问题，请尝试在 iframe.php 页面中使用此方法

&ltp>我可能正在 iframe 中加载。&lt/p>

&ltp>文本值：&lt?php echo $_POST[“text”]; ?>&lt/p>

Lûhn 的德鲁伊

评论永久链接# 2011 年 12 月 29 日

不起作用

NigelC

# 2011 年 12 月 29 日

您需要将 &lt 更改为正确的符号

I’m probably being loaded inside an iframe.&lt/p>

&ltp>Text value: &lt?php echo $_POST["text"]; ?>&lt/p>

Cody

评论永久链接# 2012 年 1 月 21 日

那也不起作用
Owen

评论永久链接# 2012 年 5 月 4 日

这是因为要呈现 <，您需要使用分号分隔代码，而不仅仅是 & lt。

正确：& l t ;（删除空格）

错误：& l t

Shan

# 2012 年 1 月 10 日

不错……！

Guy

# 2012 年 1 月 12 日

在尝试解决此确切问题时找到了此页面。我最终使用 jQuery 构建了一个 GET 查询字符串，并使用 PHP 处理它。我想将页面上表单中的数据发送到 fancybox iframe 中的表单，然后通过 AJAX 提交 - 似乎效果很好。

kathy

评论永久链接# 2013 年 2 月 6 日

你能分享一下你是如何做到的吗？我正在尝试做完全相同的事情。我有一个表单，当用户按下 Enter 键时，我希望 php 文件搜索数据，并发布到 fancybox iframe 中……

Gautam Kishore

# 2012 年 2 月 19 日

我最近对图像上传器使用了相同的技巧。我通过 opacity:0 样式化了文件输入，并通过一些好看的图像为上传器按钮及其悬停设置了包装器 div 样式。一旦浏览或拖动图像，它就会发布到 iframe 并上传到服务器，并在其正上方的无缝 iframe 中显示它，以显示调整大小和裁剪后的图像。
我很乐意撰写一篇包含所有代码的文章。全部使用 HTML5、CSS3。我只是使用 js 在文件输入更改时触发表单提交。

Adam

# 2012 年 2 月 23 日

我刚接触这个，遇到了一些麻烦。
我的网站有一个 40px 高的 css 下拉菜单，菜单内容变化很大，因此在每个页面上都显示菜单会非常麻烦。
我尝试过使用 iframe 作为菜单，但菜单的下拉部分被 iframe 切断了。是否有更好的方法或技巧可以让 iframe 悬停在页面内容上方，以便下拉菜单可用？

Lûhn 的德鲁伊

评论永久链接# 2012 年 3 月 10 日

了解如何以模块化方式使用 PHP；您使用单独的 PHP 文件并将它们一起加载到一个页面中，该页面像一个文件一样工作。
例如，一旦您编辑了导航，它将在所有页面上进行编辑。

Bigg_Brawler

# 2012 年 4 月 3 日

这太棒了！

它获取我的 php 文件并加载到 iframe 中，而无需刷新页面！这正是我希望的！

感谢您发布此信息。您让一个人的生活变得轻松多了！

fred

# 2012 年 4 月 8 日

如果您在 IE8 中动态生成 iframe，则此特定浏览器有一个特殊的陷阱。您需要在 document.createElement 方法调用中指定 name 属性

var iframe; try { iframe = document.createElement(''); } catch (ex) { iframe = document.createElement('iframe'); iframe.name = 'the-iframe-name'; }

否则，表单上传将简单地替换当前页面。

andreas

# 2012 年 4 月 21 日

太棒了！
它也适用于表单操作和 iframe src 中的外部域（例如 action=”http://anydomain.com/…”, src=”http://anydomain.com/…”, 某种程度上绕过了同源策略）
非常感谢！

neo

# 2012 年 4 月 25 日

我想在这个框架中输入注册号……

请帮助我……

neo

# 2012 年 4 月 25 日

我想在这个框架中输入注册号……

iframe name=”frame1″ src=”http://103.4.221.147/srmwebonline/exam/onlineResult.jsp” height=”416″ width=”570″ frameborder=”0″>

请帮助我..

alexh58

# 2012 年 5 月 2 日

这正是我在两个 Drupal 实例之间发布所需的内容！谢谢！

prakhar

# 2012 年 5 月 18 日

非常有用且简单的代码片段，非常感谢..

Smart

# 2012 年 5 月 29 日

我在 jQuery UI 对话框内的 iframe 中加载一个 aspx 页面以更新一些数据，并且在对话框关闭后，我需要更新父页面中的更新面板。我该怎么做？更具体地说，父页面中有一个数据网格，在我在对话框模式 iframe 中编辑数据后，我想更新数据网格中的行。

Milo LaMar

# 2013 年 2 月 25 日


var myHTMLVariable;
$(selector).dialog({
  open: function(event, ui) {
    //Cause ENTER keypress to trigger click on the modal submit button
    $(selector).kepress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find('button:eq(0)').trigger('click');
      }
    });
  },
  buttons: {
    'Submit': function() {
      //ajax call
      $.ajax({
        url: 'foo.aspx',
        success: function(data) {
          myHTMLVariable = $(data);
        },
        //...more ajax options
      });
  }
  close: function() {
    //Update updatepanel in parent page.
    $('#datagrid_x_y', window.parent.document).html(myHTMLVariable);
  }

});

问题是如何编写 datagrid_selector 还是如何在 myHTMLVariable 中获取所需的 html？我想我在这里对两者都提供了一些答案。

David Jr

# 2012 年 7 月 3 日

在实现 YouTube 的基于浏览器的上传时，我能否使用此解决方案？似乎所有数据都由 YouTube 端处理，并且只有在上传完成后，我才能知道上传成功还是失败。

谢谢。

Pavarti

# 2012年7月10日

我曾经使用过类似的代码来上传文件，现在我使用 Flash 代替了。但这勾起了我美好的回忆 :)。

Josh

# 2012年7月12日

我正在开发一个房地产网站，该网站使用 iframe 来引入房地产列表。是否有可能覆盖一些负责设置 iframe 内容样式的 CSS？我可以用 Chrome 开发者工具来修改它，但是当我在样式表中进行更改时，它们不会应用。任何帮助将不胜感激。

Ryan

# 2012年11月3日

非常感谢。这正是我想要的。

Reza 博士

# 2013年1月4日

太棒了！

你终于救了我！我一直在寻找这样一段简单的代码，用于我的 Facebook 页面标签应用程序，以便在服务器上进行 PHP_POST 并直接在 Facebook 上接收来自我们客户的反馈表单。

非常感谢，祝你一切顺利

Deepak Gangore

# 2013年2月12日

这段代码在 Chrome 和 IE9 中会两次访问 iframe.php 这个操作，而在 Firefox 中只访问一次。
请解释一下。

rjero

# 2013年5月14日

管理员，假设我想将一段 js 代码（使用 textarea）发送到另一个跨域服务器，并通过 iframe 获取输出，我做了同样的操作，并且这个方法在 Firefox 上运行良好，但在 Chromium 上却失败了！在 Firefox 中，我通过 iframe 从服务器获得了编译后的 js 的所需输出，但是当我在 Chromium 中尝试时，iframe 中没有出现任何 js 代码，这太糟糕了！

naveen

# 2013年8月1日

如何使用 Ajax 同时上传数据和文件，并进行所有验证？

Rob

# 2013年10月14日

如何访问响应？（假设你无法访问 iframe 中加载的页面代码）

kj

# 2014年4月28日

我应该在 iframe.php 中写什么？

chandra prabhat

# 2014年6月5日

我能否使用相同的概念来实现网页的 100% 高度和 100% 宽度，以及我想从中创建 iframe 的网页？请帮帮我。

b_dubb

# 2014年9月4日

这篇文章救了我。非常感谢。

Natalie Euley

# 2015年1月23日

当我尝试这样做时，网站会在发送 POST 数据之前显示在 iframe 中，并且一旦发送了 POST 数据，它不会影响 iframe 的内容。就像 iframe 只依赖于它的 src 命令，并且不会接收来自 action 的任何 POST 数据。我是否遗漏了什么？也许除了
…
$variable=$_POST[‘element’];
…
命令之外，还需要在任意 PHP 文件中添加其他内容吗？

twister8

# 2016年6月2日

<form action="mypage&COD=" target="my-iframe" method="post">

  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">

  <input type="submit" value="post">

</form>

<iframe name="my-iframe" src="`mypage&COD="></iframe>`

Lee

# 2016年10月5日

我有一个项目需要将客户姓名、地址和日期传递到一个嵌入的合同中，该合同托管在来自第三方（RightSignature）的 iframe 中。RightSignature 要求使用文本字段来显示这些数据，但我的客户希望姓名、地址和日期传递到合同中的占位符（而不是文本字段）。

如果不是在第三方 iframe 中，这将非常简单。但是，我同意我的客户的观点……一定有办法让它工作，这样信息看起来更像

圣诞老人 2016年12月25日
驯鹿大道123号
北极，阿拉斯加州 12345

而不是文本字段需要预设的宽度参数，导致它看起来像这样

圣诞老人 2016年12月25日
驯鹿大道123号
北极阿拉斯加州 12345

感谢你的意见……如果你知道如何绕过在他们的第三方 iframe 中使用 RightSignature 的文本字段！

Frederic Rufin

# 2018年6月14日

此函数创建一个临时表单，然后使用 jQuery 发送数据

function postToIframe(data,url,target){
    $('body').append('');
    $.each(data,function(n,v){
        $('#postToIframe').append('');
    });
    $('#postToIframe').submit().remove();
}

target 是目标 iFrame 的 'name' 属性，data 是一个 JS 对象

data={last_name:'Smith',first_name:'John'}

jeremy

# 2019年12月12日

如何使用 iframe 弹出 YouTube 视频，因为
我正在使用

path}}” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>

这些东西，但仍然无法连接

Dawid

# 2020年5月25日

有没有人在 Chrome 83 中遇到这种方法的问题？

Aleksandr Filatov

# 2020年11月6日

描述的过程
* 在常见情况下，请查看 https://alfilatov.com/posts/how-to-pass-data-between-iframe-and-parent-window/
* 以及在文件传输的情况下，请查看 https://alfilatov.com/posts/how-to-pass-file-into-an-iframe-and-convert-it-to-blob-for-further-ajax-request/

评论

发表评论 取消回复

发表评论取消回复