Jquery 替换iframe内容_Jquery - Fatal编程技术网

Jquery 替换iframe内容

jquery

Jquery 替换iframe内容,jquery,Jquery,这方面已经有一些问题，但还没有找到答案我有一个页面，这个帖子（通过jquery post（））将文本变量转换为几个页面（在同一个域中，因此没有x-POSTing域问题），这些帖子返回完全格式的html页面，每个页面都有不同的css信息。我希望在单独的iFrame中查看这些页面，而不对返回的内容进行任何修改整个页面似乎都被替换了（虽然我只想替换Iframe中的内容）——我说“似乎”是因为原始输入框消失了，而view source给了我原始的源代码，而不是我在页面上看到的。我只想替换iframe

这方面已经有一些问题，但还没有找到答案

我有一个页面，这个帖子（通过jquery post（））将文本变量转换为几个页面（在同一个域中，因此没有x-POSTing域问题），这些帖子返回完全格式的html页面，每个页面都有不同的css信息。我希望在单独的iFrame中查看这些页面，而不对返回的内容进行任何修改

整个页面似乎都被替换了（虽然我只想替换Iframe中的内容）——我说“似乎”是因为原始输入框消失了，而view source给了我原始的源代码，而不是我在页面上看到的。我只想替换iframe内容

我得到的页面没有我期望的任何css或格式。同样，当我查看源代码时，它会提供最初加载的源代码，而不是jquery操作发生后发生的情况

以下是我到目前为止所拥有的内容（为了调试目的，我只在一个页面上发布）：


{%csrf_令牌%}
/*将提交处理程序附加到表单*/
$（“#搜索表单”）.submit（函数（事件）{
/*阻止表单正常提交*/
event.preventDefault（）；
/*从页面上的元素获取一些值：*/
var$form=$（此），
term=$form.find（'input[name=“word”]”）。val（），
url=$form.attr（'action'）；
url=“/processinput”；
/*使用post发送数据，并将结果放入iframe*/
$（“#sakhr”）.load（url，{word:term}，function（）{
警报（“iframe现在应该已经更改了。”）；
});
});

我是jquery新手，但我不确定我是否遗漏了iframe行为中的一些明显内容。

为什么不在表单中设置

action=“/processinput”target=“sakhr”

（您可能还必须在iframe中设置

name=“sakhr”

）然后让默认行为在不使用任何JavaScript的情况下为您执行此操作？我还有一些其他页面，如

processinput

，我需要发布并从中获取结果，并且知道仅使用JavaScript即可执行此操作。还有，我试过你说的，有趣的是，我也有同样的问题。。i、我得到了第1点和第2点中概述的关于“查看源代码”的问题-在任何动态更改之前显示原始页面源代码是正常的。要查看最新版本，您需要使用适用于所选浏览器的开发人员工具。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
    {% csrf_token %}
   <input type="text" name="word" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
</head>

<body>
<iframe id="sakhr" src=""></iframe>

<script>
  /* attach a submit handler to the form */
  $("#searchForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        term = $form.find( 'input[name="word"]' ).val(),
        url = $form.attr( 'action' );
        url = "/processinput";
    /* Send the data using post and put the results in the iframe */
  $("#sakhr").load(url, { word: term }, function(){
  alert("The iframe should have changed by now.");
  });

  });
</script>
</body>
</html>