Skip to content

Instantly share code, notes, and snippets.

@makotom

makotom/tc-20191203-3.html

Created December 4, 2019 05:51
Show Gist options
  • Save makotom/067620dddd678b1a57c465eb66ba6ac5 to your computer and use it in GitHub Desktop.
Save makotom/067620dddd678b1a57c465eb66ba6ac5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tc-20191203-3.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Manipulating child window</title>
<a href="#">Click this to open <code>example.com</code> in a new window</a>
<form action="https://example.com/" target="tc-20191203-3-child"></form><!-- Navigation will occur with this form -->
<script>
document.querySelector('a[href="#"]').addEventListener('click', (evt) => {
evt.preventDefault();
window.open('', 'tc-20191203-3-child', 'width=600,height=400');
document.querySelector('form[target="tc-20191203-3-child"]').submit(); // Cause a navigation by submitting the form
});
</script>
Raw
tc-20191203-4.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Manipulating child window</title>
<a href="#">Click this to open <code>example.com</code> in a new window</a>
<a href="https://example.com/" target="tc-20191203-4-child"></a><!-- Navigation will occur with this hyperlink -->
<script>
document.querySelector('a[href="#"]').addEventListener('click', (evt) => {
evt.preventDefault();
window.open('', 'tc-20191203-4-child', 'width=600,height=400');
document.querySelector('a[target="tc-20191203-4-child"]').click(); // Cause a navigation by clicking the hyperlink
});
</script>
@makotom
Copy link
Author

makotom commented Dec 4, 2019

Description

In https://gist.github.com/makotom/1b9ca9859c7f24b947ae5bb003544076, I demonstrated that pages will not be loaded in an artificially-opened child window under certain circumstances.

In this gist, I would like to show that this can be mitigated by use form instead of a.

Repro

For both tc-20191203-3.html and tc-20191203-4.html, follow the steps below:

  1. Open the file
  2. Click the visible anchor saying "Click this to open example.com in a new window"

Note: You can use https://makotom.net/tc-20191203-3.html or https://makotom.net/tc-20191203-4.html, respectively, instead.

Expected result:

For both pages, example.com is expected to be shown in a new window/tab.

Actual result with Fenix Nightly 191203 10:27 (Build #13371033)

With tc-20191203-3.html, example.com was shown.
With tc-20191203-4.html, however, example.com was not shown.

Discussion

You can find out from the diff of the two codes that, while tc-20191203-4.html attempts to open example.com by clicking a hyperlink, tc-20191203-3.html attempts that by submitting a form, and that is the sole difference for them.

Sounds interesting, doesn't it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment