2

I have two page like this

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>

and 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>

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 :(

Alexander Nenashev
  • 8,775
  • 2
  • 6
  • 17
Nguyên Ngô Duy
  • 348
  • 1
  • 7
  • Why do you want to send values from `test.html` to `search.html` ? Is it okay to set the values in `search.html` instead of sending them from `test.html` ? – Istiaque Ahmed Jul 10 '23 at 05:41
  • Because search.html has many version from many client, my customer waht to create an test.html and send some string to search.html for search some thing – Nguyên Ngô Duy Jul 10 '23 at 06:06
  • No clear what you want to say. Can you tell what exactly what you are trying to implement in the real scenario ? – Istiaque Ahmed Jul 10 '23 at 06:11
  • In my case: my customer want an page can handle many search.html. when user input some text in test.html, it send this string to input in search.html and raise keyup for search. – Nguyên Ngô Duy Jul 10 '23 at 06:32
  • If *search.html* is not in your domain - you cannot. Well, besides asking the owner of that page to embed some scripts of yours. Or leverage the `event.origin` for [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) - if they use it at all. – Roko C. Buljan Jul 10 '23 at 06:32
  • @NguyênNgôDuy, show more of your actual code. In `test.html`, I see no way to input any text. – Istiaque Ahmed Jul 10 '23 at 06:47
  • I think is best to send the value as an url parameter – Toni Michel Caubet Jul 10 '23 at 06:49
  • @RokoC.Buljan you was wrong closing it as a duplicate, that's a special case since the OP has no control over the child window's source. and it's resolved by me and the answer is accepted – Alexander Nenashev Jul 10 '23 at 07:00
  • @a Indeed. Reopened. Thank you for bringing it to my attention – Roko C. Buljan Jul 10 '23 at 07:04
  • 1
    @AlexanderNenashev seems like `search.html` *is* indeed on the same server (as stated by OP) and there's no restriction to Content-Security-Policy in place, nor X-Frame-Options. – Roko C. Buljan Jul 10 '23 at 07:19

1 Answers1

2

Inject the code into the child window;

enter image description here

<!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");
                $(`<script>$("#search").trigger('keyup');<\/script>`).appendTo(w.document.head);
            }, 5000);
        }

    });
</script>
Alexander Nenashev
  • 8,775
  • 2
  • 6
  • 17