发送一个 keyup 事件到子窗口,而不改变子窗口的源。

huangapple go评论65阅读模式
英文:

Send a keyup event to a child window without changing source of the child

问题

我有两个页面,像这样

test.html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    
</body>
</html>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    $(document).ready(function(){
        var w=window.open("search.html","_blank");
        w.onload = function(){
            setTimeout(() => {
                $('#search', w.document).val("test");
                $('#search', w.document).trigger("keyup");
            }, 5000);
        }
    });
</script>

和 search.html

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
</head>
<body>
    <input type="text" id="search">
</body>
</html>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("#search").keyup(function(){
            alert($(this).val());
        });
    });
</script>

当test.html成功加载时,它会打开一个名为search.html的窗口,并将搜索值设置为"test",然后触发keyup事件。但只有设置值能够生效,无法触发keyup事件。请帮我检查一下 发送一个 keyup 事件到子窗口,而不改变子窗口的源。

英文:

I have two page like this

test.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
&lt;/body&gt;
&lt;/html&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function(){
        var w=window.open(&quot;search.html&quot;,&quot;_blank&quot;);
        w.onload = function(){
            setTimeout(() =&gt; {
                $(&#39;#search&#39;, w.document).val(&quot;test&quot;);
                $(&#39;#search&#39;, w.document).trigger(&quot;keyup&quot;);
            }, 5000);
        }
    });
&lt;/script&gt;

and search.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;input type=&quot;text&quot; id=&quot;search&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function(){
        $(&quot;#search&quot;).keyup(function(){
            alert($(this).val());
        });
    });
&lt;/script&gt;

When test.html load success, it open window search.html and set search value is test and send event keyup to it. But only set value can happen, keyup cannot send.
Please check for me 发送一个 keyup 事件到子窗口,而不改变子窗口的源。

答案1

得分: 2

将代码注入子窗口中;

<!DOCTYPE html>
<html>

<head>
    <title>测试</title>
</head>

<body>

</body>

</html>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    $(document).ready(function () {
        var w = window.open("search.html", "_blank");
        w.onload = function () {
            setTimeout(() => {
                $('#search', w.document).val("test");
                $(`<script>$("#search").trigger('keyup');</script>`).appendTo(w.document.head);
            }, 5000);
        }

    });
</script>

发送一个 keyup 事件到子窗口,而不改变子窗口的源。

英文:

Inject the code into the child window;

发送一个 keyup 事件到子窗口,而不改变子窗口的源。

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;/body&gt;

&lt;/html&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function () {
        var w = window.open(&quot;search.html&quot;, &quot;_blank&quot;);
        w.onload = function () {
            setTimeout(() =&gt; {
                $(&#39;#search&#39;, w.document).val(&quot;test&quot;);
                $(`&lt;script&gt;$(&quot;#search&quot;).trigger(&#39;keyup&#39;);&lt;\/script&gt;`).appendTo(w.document.head);
            }, 5000);
        }

    });
&lt;/script&gt;

huangapple
  • 本文由 发表于 2023年7月10日 12:56:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76650757.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定