Why is the HTML form not loading into the generated Javascript iframe?
So, in pure HTML, I can create a form that loads its results into an iframe (instead of navigating 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 am trying to do a similar thing in Greasemonkey and am running into problems.
I have a page with a form that I would rather load my results into an iframe, so I create an iframe and change the form target
to match the iframe name. However, this does not load the results page in the iframe, but instead opens the results page in a new tab.
I traced the issue back to using Javascript to create the iframe. It seems to embed the iframe into the DOM is just fine (and looking at firebug, the source generated is almost identical to the one above, except for the extra tag <script>
). But when I create an iframe in Javascript I get "open results in new tab" behavior.
<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 result to load in an iframe generated by Javascript? (I haven't tried document.write()
it yet, but I'm not sure if this would be very helpful from Greasemonkey).
update . So, I decided to give it a try document.write()
and it works. So maybe I just need to figure out how to use this from GreaseMonkey (without messing up a lot of DOM element sets that 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 still want to know why document.body.appendChild()
doesn't work, but document.write()
does.
update 2 : this doesn't seem to be just forms, I can replace the link instead <form>...</form>
and get the same results for all three cases
<div><a target="results" href="http://www.google.com">test</a></div>
a source to share
Ok, I have solved a satisfactory solution. I need to define the name of the iframe before calling appendChild()
.
<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<div><a target="results" href="http://www.google.com">test</a></div>
<script>
try {
// this works
const iframe = document.createElement('iframe');
iframe.name = 'results';
document.body.appendChild( iframe );
} catch (e) {
alert(e);
}
</script>
</body>
</html>
I'm not sure why setting the name after adding it to the document didn't work (and I'd still like to know if anyone wants 15pts), but it allows me to work with my GreaseMonkeying, so that's good enough.
a source to share