jquery在iframe下失效

Posted 2023-04-26

我的父页面引了两个iframe框，两个框包含两个子页面，父页面及子页面都引入了jquery.1.8

参考技术A 应该不会有问题的，单独框架形成单独的页面，仔细检查下页面上是否引用了jquery库追问

额，js库没有问题，整个项目中所引用的js都在一个位置，只有当页面中有iframe嵌入子页面是，控制台会报出$未定义等jquery错误

追答

你看看子页面里没有jquery库

追问

ssh框架加easyui，子页面已经引用jquery库

参考技术B 然后你想表达什么？追问

页面报了很多$未定义，请问怎么解决

追答

js路径错了？

如何使用 Jquery 将数据发布到 iframe

【中文标题】如何使用 Jquery 将数据发布到 iframe

【英文标题】：How to post data to iframe with Jquery

【发布时间】：2013-12-19 15:05:34

【问题描述】：

如何在 Jquery 中将数据动态发布到 iframe。

在这种情况下，我确实需要将数据发布到 iframe，我不能使用 $.POST，因为接收到的数据是按顺序返回的（缓冲的）

如果您有一种解决方法可以让 jquery 在接收到数据时处理 $.POST ' 返回的数据。我很好奇！

目前我用GETS这样处理它：

var iframe = $('<iframe style="display:none;"></iframe>');
$( "body" ).append(iframe);
iframe.attr('src','server.php?type=getFolders&inode='+nodeData.inode).load(function()$(this).remove());

这基本上创建了一个临时 iframe 并让 php 在返回数据时将 javascript 注入其中（使用 ob_flush();flush(); ），然后当它完成时，它只是删除 iframe 以进行清理。

在 iframe 中，我使用 window.parent. 访问主机，然后使用主机的方法。

这是理想的，但可以与 GET 一起使用，我怎样才能使它与 POST 一起使用？

【问题讨论】：

您需要使用 iframe 吗？你能不使用 AJAX 或类似的东西吗？

我在我的问题中解释了为什么我需要依赖 iframe 并且不能以正常方式使用 ajax，返回的数据是 javascript，并且需要在页面以块形式返回时立即处理。

您的意思是，您想使用 POST 请求返回的数据动态加载 iframe 吗？

不，我想用帖子数据动态加载 iframe

您要查找的术语是“长轮询”

【参考方案1】：

您可以使用目标方法或使用 AJAX 进行上述工作

<form action="..." target="an_iframe" type="post">
    <input type="text" name="cmd" placeholder="type a command here..." />
    <input type="submit" value="Run!" />
</form>
<iframe id="an_iframe"></iframe>

【讨论】：

那真的不是动态的...而且AJAX在处理数据之前等待返回完成，我需要在返回时处理数据，返回的数据只有js。

【参考方案2】：

好的，因为这显然不存在，所以我创建了自己的解决方案。在这里分享它，以防有人想在 jQuery 中发布到 iFrame。

js函数/类：

function iframeform(url)

    var object = this;
    object.time = new Date().getTime();
    object.form = $('<form action="'+url+'" target="iframe'+object.time+'" method="post" style="display:none;" id="form'+object.time+'" name="form'+object.time+'"></form>');

    object.addParameter = function(parameter,value)
    
        $("<input type='hidden' />")
         .attr("name", parameter)
         .attr("value", value)
         .appendTo(object.form);
    

    object.send = function()
    
        var iframe = $('<iframe data-time="'+object.time+'" style="display:none;" id="iframe'+object.time+'"></iframe>');
        $( "body" ).append(iframe); 
        $( "body" ).append(object.form);
        object.form.submit();
        iframe.load(function()  $('#form'+$(this).data('time')).remove();  $(this).remove();   );
    

那么当您需要将表单发送到临时 iframe 时：

var dummy = new iframeform('server.php');
dummy.addParameter('type','test');
dummy.addParameter('message','Works...');
dummy.send();

这是 server.php 示例文件：

if($_POST[type] == 'test') 

    header( 'Content-type: text/html; charset=utf-8' );
    echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';
    echo str_pad('',4096); //fill browser buffer

    for($i = 0; $i < 10; $i++)
        
            echo '<script type="text/javascript">window.parent.console.log(\''.$_POST[message].'\');</script>';
            ob_flush(); flush();
            usleep(350000);
        

结果如预期：

主框架的控制台立即开始每 350 毫秒输出字符串 'Works...'，即使 php 仍在运行。

当 php 完成发送块时，它只是删除临时表单和临时 iframe。

【讨论】：

太棒了！将 name 属性添加到 iframe 以使其在当前 chrome (43.0.2357.81) 中工作，参见。 ***.com/a/7085607/899586

【参考方案3】：

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

function postToIframe(data,url,target)
    $('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
    $.each(data,function(n,v)
        $('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
    );
    $('#postToIframe').submit().remove();

target 是目标 iFrame 的 'name' attr，data 是一个 JS 对象：

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

【讨论】：

谢谢！这成功地为我解决了一个完全不同的问题。我将内容加载到 iFrame 中，但根据我加载它的方式，$(document).ready() 要么不会触发，要么“文档”是整个页面文档，而不是 iframe 文档。您的代码的变体使这项工作对我来说非常完美。我不得不发布一些 JSON，我现在正在使用您的技术将其放入 TEXTAREA。