Question

我已经尝试了教程，但仍然无法正常工作，我的代码出了什么问题？

父页面脚本：

<!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;

    $("#iframe1").contents().find("#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 )
            alert('Hello');
    });
});
</script>
    </head>
    <body> 
        <iframe id="iframe1" src="iframe.html">
        </iframe>
    </body>
</html>

iframe脚本：

<!DOCTYPE html>
<html>
    <head>
        <title>Iframe</title>
    </head>
    <body>
        <input type="text" id="nominal" value="" />
    </body>
</html>

请告诉我出了什么问题，谢谢提前。

Answer 1

在您的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>
var money = 20000;
function my_custom_function(input)
{
    // remove possible existing message
    if( input.next().is("form") ) input.next().remove();
    // show message
    if( input.val() > money ) alert('Hello');
}
</script>
    </head>
    <body> 
        <iframe id="iframe1" src="iframe.html">
        </iframe>
    </body>
</html>

在您的iframe代码中

<!DOCTYPE html>
<html>
    <head>
        <title>Iframe</title>
        <script>
        $(function() {
            $("#nominal").change("change", function() {
                parent.my_custom_function($(this));
            });
            $("#nominal").change("keyup", function() {
                parent.my_custom_function($(this));
            });
        });
        </script>
    </head>
    <body>
        <input type="text" id="nominal" value="" />
    </body>
</html>

希望这个技巧对你有所帮助。

Answer 2

您有两种可能的情况：

如果你可以修改iframe页面;
如果你不能。

您的问题是，当您的javascript运行时，iframe的内容可能无法使用，因此JQuery无法“附加”到子控件。如果您可以更改iframe代码，则可以将此脚本添加到iframe页面

window.onload = function() {
    parent.iframeLoaded();
}

显然在父页面上，您必须将代码更改为

$(function() {
    var money = 20000;

    window.iframeLoaded = function() {
    $("#iframe1").contents().find('#nominal').on('keyup', null, function(event)    {
                var input = $(this);
                // show message
                if( input.val() > money )
                    alert('Hello');
        });
        }
    });
});

如果您无法更改iframe html，则无法绑定到控件的keyup事件，但您可以绑定到iframe 1，因此在这种情况下，您需要绑定iframe的keyup，然后过滤#nominal originated事件和您的代码应该是这样的

$(function() {
    var money = 20000;

        $("#iframe1").contents().on('keyup', null, function(event) {
            if(event.target.id === 'nominal'){
                var input = $("#iframe1").contents().find('#nominal');
                // show message
                if( input.val() > money )
                    alert('Hello');
            }
        });
});

无法在iframe页面中获取输入值并进入父页面

2 个答案: