So, in pure HTML, I can create a form that loads its results into an iframe (instead of moving the user to the result url).
<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<!-- form result loads in this iframe -->
<iframe name='results'></iframe>
</body>
</html>
I'm trying to do a similar thing in Greasemonkey, and running into issues.
I have a page with a form that I'd rather have load its results into an iframe,
so I create an iframe, and change the form target to match the iframe's name.
However, this doesn't load the result page in the iframe, but instead opens the
result page in a new tab.
I've traced the problem down to using Javascript to create the iframe. It seems
to insert the iframe into the DOM just fine (and looking at firebug, the source
generated is nearly identical to that above, except for an extra <script> tag).
But when I create the iframe in Javascript, I get the 'open results in a new tab'
behaviour.
<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<script>
try {
// form result doesn't load in this iframe, for some reason
const iframe = document.body.appendChild( document.createElement('iframe') );
iframe.name = 'results';
} catch (e) {
alert(e);
}
</script>
</body>
</html>
What do I need to do to get the results to load in a iframe created by Javascript? (I haven't tried document.write() yet, but I'm not sure that would be very useful from Greasemonkey).
update: So I got around to trying document.write(), and it works. So maybe I'll just have to figure out how to use that from GreaseMonkey (without messing up my multitude of DOM elements I have handles to)
<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<script>
try {
// but form result will load in this iframe
document.write('<iframe name="results"></iframe>');
} catch (e) {
alert(e);
}
</script>
</body>
</html>
I'm still want to know why document.body.appendChild() doesn't work, but document.write() does.
update2: it doesn't seem to be just forms, I can substitute a link in instead of the <form>...</form> and get the same results for all three cases
<div><a target="results" href="http://www.google.com">test</a></div>