-
Notifications
You must be signed in to change notification settings - Fork 412
/
frames.html
127 lines (103 loc) · 6.43 KB
/
frames.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html id="html" data-skip-event-details="turbo:before-render">
<head>
<meta charset="utf-8">
<title>Frame</title>
<script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
<script src="/src/tests/fixtures/test.js"></script>
<script>
addEventListener("click", ({ target }) => {
if (target.id == "add-turbo-action-to-frame") {
target.closest("turbo-frame")?.setAttribute("data-turbo-action", "advance")
} else if (target.id == "remove-target-from-hello") {
document.getElementById("hello").removeAttribute("target")
}
})
</script>
<style>
.push-off-screen { margin-top: 1000px; }
</style>
</head>
<body>
<h1>Frames</h1>
<turbo-frame id="frame" data-loaded-from="/src/tests/fixtures/frames.html">
<h2>Frames: #frame</h2>
<form action="/src/tests/fixtures/frames/frame.html">
<button id="frame-form-get-no-redirect">Navigate #frame without a redirect</button>
</form>
<button id="add-turbo-action-to-frame" type="button">Add [data-turbo-action="advance"] to frame</button>
<a id="link-frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame from within</a>
<a id="link-frame-with-search-params" href="/src/tests/fixtures/frames/frame.html?key=value">Navigate #frame with ?key=value</a>
<a id="link-nested-frame-action-advance" href="/src/tests/fixtures/frames/frame.html" data-turbo-action="advance">Navigate #frame from within with a[data-turbo-action="advance"]</a>
</turbo-frame>
<a id="outside-frame-form" href="/src/tests/fixtures/frames/form.html" data-turbo-frame="frame">Navigate #frame to /frames/form.html</a>
<a id="link-outside-frame-action-advance" href="/src/tests/fixtures/frames/frame.html" data-turbo-frame="frame" data-turbo-action="advance">Navigate #frame from outside with a[data-turbo-action="advance"]</a>
<form id="form-get-frame-action-advance" action="/__turbo/redirect" data-turbo-frame="frame" data-turbo-action="advance">
<input type="hidden" name="path" value="/src/tests/fixtures/frames/frame.html">
<button>Navigate #frame with GET form[data-turbo-action="advance"]</button>
</form>
<form id="form-post-frame-action-advance" method="post" action="/__turbo/redirect" data-turbo-frame="frame" data-turbo-action="advance">
<input type="hidden" name="path" value="/src/tests/fixtures/frames/frame.html">
<button>Navigate #frame with POST form[data-turbo-action="advance"]</button>
</form>
<form method="post" action="/__turbo/redirect" data-turbo-frame="frame" data-turbo-action="advance">
<input type="hidden" name="path" value="/src/tests/fixtures/frames/frame.html">
<button id="button-frame-action-advance" data-turbo-action="advance">Navigate #frame with button[data-turbo-action="advance"]</button>
</form>
<turbo-frame id="hello" target="frame">
<h2>Frames: #hello</h2>
<a href="/src/tests/fixtures/frames/frame.html">Load #frame</a>
<button type="button" id="remove-target-from-hello">Remove #hello[target]</button>
</turbo-frame>
<a id="link-hello-advance" href="/src/tests/fixtures/frames/hello.html" data-turbo-frame="hello" data-turbo-action="advance">advance #hello</a>
<turbo-frame id="nested-root" target="frame">
<h2>Frames: #nested-root</h2>
<a id="inner-outer-frame-link" href="/src/tests/fixtures/frames/frame.html" data-turbo-frame="nested-child">Inner/Outer frame link</a>
<form data-turbo-frame="nested-child" method="get" action="/src/tests/fixtures/frames/frame.html">
<input id="inner-outer-frame-submit" type="submit" value="Inner/Outer form submit">
</form>
<turbo-frame id="nested-child">
<h2>Frames: #nested-child</h2>
<a href="/src/tests/fixtures/frames/frame.html">Load #nested-child</a>
<a href="/src/tests/fixtures/one.html" data-turbo-frame="_top">Visit one.html</a>
<form method="get" action="/src/tests/fixtures/one.html" data-turbo-frame="_top">
<input id="nested-child-navigate-form-top-submit" type="submit" value="Nested Child form submit">
</form>
</turbo-frame>
<turbo-frame id="nested-child-navigate-top" target="_top">
<form method="get" action="/src/tests/fixtures/one.html">
<input id="nested-child-navigate-top-submit" type="submit" value="Nested Child form submit">
</form>
</turbo-frame>
</turbo-frame>
<turbo-frame id="navigate-top" target="_top">
<a href="/src/tests/fixtures/one.html?key=value">Visit one.html?key=value</a>
<a href="/src/tests/fixtures/one.html" data-turbo-frame="_self">Visit self</a>
</turbo-frame>
<turbo-frame id="missing">
<a href="/src/tests/fixtures/frames/frame.html">Missing frame</a>
</turbo-frame>
<turbo-frame id="body-script" target="body-script">
<a id="body-script-link" href="/src/tests/fixtures/frames/body_script.html">Load body-script</a>
</turbo-frame>
<turbo-frame id="eval-false-script" target="eval-false-script">
<a id="eval-false-script-link" href="/src/tests/fixtures/frames/eval_false_script.html">data-turbo-eval=false script</a></p>
</turbo-frame>
<turbo-frame id="recursive" recurse="composer" src="/src/tests/fixtures/frames/recursive.html">
</turbo-frame>
<a id="frame-self" href="/src/tests/fixtures/frames/self.html" data-turbo-frame="frame">Visit self.html</a>
<a id="navigate-form-redirect" href="/src/tests/fixtures/frames/form-redirect.html" data-turbo-frame="form-redirect">Visit form-redirect.html</a>
<turbo-frame id="form-redirect"></turbo-frame>
<turbo-frame id="part">
<a id="frame-part" href="/src/tests/fixtures/frames/part.html">Load #part</a>
</turbo-frame>
<a id="outer-frame-link" href="/src/tests/fixtures/frames/frame.html" data-turbo-frame="frame">Outer frame link</a>
<form data-turbo-frame="frame" method="get" action="/src/tests/fixtures/frames/frame.html">
<input id="outer-frame-submit" type="submit" value="Outer form submit">
</form>
<hr class="push-off-screen">
<input id="below-the-fold-input">
<a id="below-the-fold-link-frame-action" data-turbo-action="advance" data-turbo-frame="frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame</a>
<a id="link-to-eager-loaded-frame" href="/__turbo/redirect?path=/src/tests/fixtures/page_with_eager_frame.html">Eager-loaded frame after GET redirect</a>
</body>
</html>