Javascript Firefox使用表单元素值检索iframe的内容_Javascript_Firefox

Javascript Firefox使用表单元素值检索iframe的内容

javascript firefox

Javascript Firefox使用表单元素值检索iframe的内容,javascript,firefox,Javascript,Firefox,我有带有表单元素的iframe，如输入、选择文本区域等。我需要将整个iframe内容以及输入的值添加到这些元素中。在IE7,8中，它可以正常工作，但在FF中，我得到的是空值或默认值以下是代码片段： Iframe内容 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Docu

我有带有表单元素的iframe，如输入、选择文本区域等。我需要将整个iframe内容以及输入的值添加到这些元素中。在IE7,8中，它可以正常工作，但在FF中，我得到的是空值或默认值

以下是代码片段：

Iframe内容

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
  </head>
  <body>
    <div id="content">
      <input name="fn" type="text" id="fn"/>
      <select name="states">
        <option val=""></option>
        <option val="ca">CA</option>
        <option val="co">CO</option>
        <option val="ce">CE</option>
        <option val="cI">CI</option>
      </select>
    </div>
  </body>
</html>

我在输入中输入了值，并在上面的选择并运行脚本中选择了一些内容。在IE中，我使用输入的值获取内容，但ff和其他浏览器在加载时只返回html，尽管我可以单独检索值，例如使用jquery

  $('#frame1').contents().find('#fn').val()

我真的同意这个问题。请帮帮我。谢谢

是否有其他方法可以在不使用innerHTML的情况下获取此内容？

这与框架无关——innerHTML在不同浏览器上的行为不同。即使是简单的情况

<div id=mydiv><input name=in id=inval value=100></div>

会表现出同样的行为。我看不到单独检索值的替代方法。

如果使用jquery，可以使用serialize（）方法检索所有输入的名称/值对。只需将输入字段包装到表单元素中，然后使用类似的方法检索它们：

var input_vals=$("iframe").contents().find("form").serialize();

//output:
//"fn=bla&states=CO"

实际上，解决方案发布在StackOverflow上，但我错过了原来的解决方案。可能其他人会需要这个功能我在这里重新发布代码和我的小更新

这个jquery插件只是在我们获取innerHtml之前更新字段

(function($) {
    var oldHTML = $.fn.html;

    $.fn.formhtml = function() {
        if (arguments.length) return oldHTML.apply(this, arguments);
        $("input,textarea,button", this).each(function() {
            this.setAttribute('value', this.value);
        });

        $("select option", this).each(function() {
            if (this.selected)
                this.setAttribute('selected', 'selected');
            else
                this.removeAttribute('selected');
        });

        $("textarea", this).each(function() {
            $(this).html(this.value);
        });

        $(":radio,:checkbox", this).each(function() {
            // im not really even sure you need to do this for "checked"
            // but what the heck, better safe than sorry
            if (this.checked) this.setAttribute('checked', 'checked');
            else this.removeAttribute('checked');
        });
        return oldHTML.apply(this);
    };

    //optional to override real .html() if you want
    // $.fn.html = $.fn.formhtml;
})(jQuery);

谢谢你的回答。是的，我同意，页面中的简单innerHTML也在做同样的事情。不幸的是，没有innerHTML，还有其他方法可以获取整个内容吗？

(function($) {
    var oldHTML = $.fn.html;

    $.fn.formhtml = function() {
        if (arguments.length) return oldHTML.apply(this, arguments);
        $("input,textarea,button", this).each(function() {
            this.setAttribute('value', this.value);
        });

        $("select option", this).each(function() {
            if (this.selected)
                this.setAttribute('selected', 'selected');
            else
                this.removeAttribute('selected');
        });

        $("textarea", this).each(function() {
            $(this).html(this.value);
        });

        $(":radio,:checkbox", this).each(function() {
            // im not really even sure you need to do this for "checked"
            // but what the heck, better safe than sorry
            if (this.checked) this.setAttribute('checked', 'checked');
            else this.removeAttribute('checked');
        });
        return oldHTML.apply(this);
    };

    //optional to override real .html() if you want
    // $.fn.html = $.fn.formhtml;
})(jQuery);