Question

如何从iframe访问id元素到父页面？我试图使用这种方法，但仍无法正常工作。

Parent.html

<html>
    <head>
        <title>Parent</title>
    </head>
    <body> 
    <button id="click" onclick="alert('Hello');">click</button>
        <iframe id="iframe1" src="iframe.html">
        </iframe>
    </body>
</html>

Iframe.html的

<!DOCTYPE html>
<html>
    <head>
        <title>Parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
    var money = 20000;

    $("#nominal").on("change keyup", function() {
        var input = $(this);

        // remove possible existing message
        if( input.next().is("form") )
            input.next().remove();

        // show message
        if( input.val() > money )
            window.parent.$('#click').trigger('click');
    });
});
</script>
    </head>
    <body> 
    <input type="text" id="nominal">
    </body>
</html>

我创建的脚本是否有问题？请帮我改进这段代码。提前谢谢。

问题已解决

Answer 1

您尝试在父窗口上使用jQuery，尽管它没有在该上下文中定义。它仅在子文档中定义。

而是更改您的子iframe脚本以在父窗口的元素上调用jQuery。这是一个例子：

父文件

<html>
  <head>
    <title>Parent</title>
  </head>
  <body>
    <button id="click" onclick="alert('Hello')">click</button>
    <iframe id="iframe1" src="iframe.html">
    </iframe>
  </body>
</html>

儿童（iframe）文件

<!DOCTYPE html>
<html>
  <head>
    <title>Parent</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-3.1.0.slim.js"></script>
  </head>
  <body> 
    <input type="text" id="nominal">

    <script>
      $(function() {
          var money = 20000;

          $("#nominal").on("change keyup", function() {
              var input = $(this);

              // remove possible existing message
              if (input.next().is("form")) {
                  input.next().remove();
              }

              // show message
              if (input.val() > money) {
                $(window.parent.document.getElementById('click')).trigger('click');
              }
          });
      });
    </script>
  </body>
</html>

https://plnkr.co/edit/ks8oFmQyxHYFt0h8eBbF?p=preview

<强>替代地

你也可以完全删除jQuery，只需触发点击即可：

// replace this
$(window.parent.document.getElementById('click')).trigger('click');

// with this
window.parent.document.getElementById('click').click();

关于安全性的说明：这是一种相当脆弱的方法，因为您必须知道具有该特定id属性的父文档中存在特定元素。在对可能不存在的节点上调用click之前，最好至少进行一些检查。

Answer 2

要达到预期效果，请使用以下选项：

1.在parent.html中创建onclick功能检查 2.使用parent.check（）

在iframe.html中使用它

Parent.html：

<html>
    <head>
        <title>Parent</title>
    </head>



    <body> 
        <script>
      function getId(){

       alert('Hello')
      }

    </script>
    <button id="click" onclick="getId()">click</button>
        <iframe id="iframe1" src="iframe.html">
        </iframe>
    </body>
</html>

Iframe.html的：

<!DOCTYPE html>
<html>
    <head>
        <title>Parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
    var money = 20000;

    $("#nominal").on("change keyup", function() {
        var input = $(this);

        // remove possible existing message
        if( input.next().is("form") )
            input.next().remove();

        // show message
        if( input.val() > money ){
        parent.getId();
            window.parent.$('#click').trigger('click');
    }
    });
});
</script>
    </head>
    <body> 
    <input type="text" id="nominal">
    </body>
</html>

plunker - https://plnkr.co/edit/OBHTxA8adzoFEvD4eowA?p=preview

从iframe访问父页面的id元素

2 个答案: