So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.
I just cannot get this to work.
Here is the HTML code:
<div id="start">
<label for="startLocation">Start location ID:</label>
<input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>
<div id="dest">
<label for="destination">Destination ID:</label>
<input type="text" id="destination" name="destination" ><br><br>
</div>
<button onclick="changeMap()">Show the map!</button><br><br>
</form>
<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>
This would be the function:
function changeMap(){
//place IDs to put into url
var start = document.getElementById('startLocation').value;
var dest = document.getElementById('destination').value;
//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";
var mapSource2 = "&destination=place_id:";
var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";
var mapSource = mapSource1+start+mapSource2+dest+mapSource3;
//iframe
var iframe = document.getElementById('map');
//changing the src of the iframe
iframe.src = mapSource;
}
The line
<button onclick="changeMap()">Show the map!</button><br><br>
may be causing the problem.
To begin with, button elements, if not given a type="button", are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.
Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:
<button type="button" id="show-map">Show the map!</button><br><br>
var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);
Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).
Unless you're using document.onReady, the order of the script tag and button really matter. If the script references the button, the button comes first. If the button references the script, the script must come first.
Wrapping in some sort of document.onReady is common practice. jQuery has a function ($.ready) that can be used to do this, but if you're brave you can also do it without jQuery.
Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.
Related
This sort of links back to a previous question that I made. The goal was to change the iframe src with a text input. After lots of experimentation, it worked. However, this has arisen a new problem. After I enter the link and submit it, it adds /?link=linkhere to the end of the page and refreshes it. Then, once it's refreshed, the original src comes back, making it useless.
Here's the most important code:
<iframe
id="minecraftFrame"
src="//classic.minecraft.net"
height="500"
width="800"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
<input type="text" id="myInput" name="input">
<button class="button" onclick="changeChannel()">Go</button>
<script>
function changeChannel(){
document.getElementById("iFrame").src = document.getElementById("myInput").value;
}
</script>
I'm unsure of what to try at this point, since I'm not too experienced with javascript. I just don't want the main page to refresh after change the src.
You need to prevent default, i.e. stop event bubbling which is resulting in reload. See if that works for you. Seems like it should as you are submitting the form which would result in refresh of the page.
function changeChannel() {
event.preventDefault();
// ...
}
Your code included this --- document.getElementById("iFrame").src
the id of the iframe is "minecraftFrame" and not "iFrame"
or you could use document.querySelector('iFrame')
and stop the page reload with
function changeChannel(e) {
e.preventDefault();
// Code goes here
}
I know this have been asked so many times but everyone ask it to suite his own need so couldn't find answer that help me
I have two sites and have access to both and can add whatever I need inside both sites
my first site
http://www.mysite1.com
on this site
I have text field with specific value
I have an iFrame whose content are sourced from my other website.
<input type='text' name='test1' value='5'>
<iframe name='myframe' src='http://www.mysite2.com/index.php'></iframe>
on this page
http://www.mysite2.com/index.php
I have input text field
What I am trying to achieve is :
getting the specific value from my first site to the input field in my second site
Since that manipulating frames that have a different origin will cause a Cross-Origin error to occur, you'll have to use the window.postMessage() method to send a message to the child <iframe> and, inside it, listen to window.onmessage and handle the message.
Here is an example, supposing you have got a DOM structure like this:
Site #1 (www.mysite1.com):
<body>
<iframe id="site2-frame" src="http://www.mysite2.com/index.php"></iframe>
</body>
Site #2 (www.mysite2.com) in the iframe:
<body>
<input id="input-field" />
</body>
Then in your site #1 you'll have to send a message to the frame, like this:
var frame = document.getElementById('site2-frame');
frame.contentWindow.postMessage('Something something something', '*');
And in your site #2, the one inside the frame, you'll listen to the message and set the data:
var input = document.getElementById('input-field');
window.addEventListener('message', function(e) {
// Check the origin, accept messages only if they are from YOUR site!
if (/^http\:\/\/www\.mysite1\.com/.test(e.origin)) {
input.value = e.data;
// This will be 'Something something something'
}
});
JCOC611 is right. In modern web development Window.postMessage is the way to go. Selecting elements within the iframe and changing their value will very like cause cross-origin security errors – for good reasons.
Here is an example, how you could realize exchanging a value across site/iframe using the postMessage event pattern:
<script>
window.onload = function(){
// Define the target
var win = document.getElementById('iframe').contentWindow;
// Define the event trigger
document.getElementById('form').onsubmit = function(e){
// Define source value or message
win.postMessage(document.getElementById('source').value);
e.preventDefault();
};
};
</script>
<form id='form'>
<input id="source" type='text' value='5'>
<input type='submit'/>
</form>
<iframe name='myframe' src='http://www.mysite2.com/index.php'>
<!-- This is what happens inside the iframe -->
<form id='form'>
<input id='target' type='text' value=''>
</form>
<script>
// Wait for the message
document.addEventListener('message', function(e){
// When you receive the message, add it to the target
document.getElementById('target').textContent = e.data;
}, false);
</script>
</iframe>
You can always send vars using iframe url query string name value pairs, and then on page load populate the variables or input fields as you desire.
I'm building a page that I want a form to be able to target the iframe and have the selected webpage be what displays in the iframe.
I'm only needing the iframe to display an external webpage, and a button to make it happen. Not actually passing any information form or to the form.
Thanks
EDIT: After the Information I learned here, and a few Google searches to expound on that knowledge I came up with this, it works nicely.
<html>
<head>
<title>Check Port 1935</title>
</head>
<body>
<iframe id="resultsFrame" src="http://helpdesk.mydomain.com/test/prompt.html" name=resultsFrame width="500" height="300"></iframe>
<p>The page will display information about Wowza if the port is open<br>
The page will time out after ~20 seconds or so if the port is closed</p>
<form id="frmTestRegion" method="GET">
<select id="SelectRegion" name="SelectRegion">
<option value="http://helpdesk.mydomain.com/test/prompt.html"></option>
<option value="http://ipaddress1:port/">USA</option>
<option value="http://ipaddress2:port/">Europe</option>
<option value="http://ipaddress3:port/">Australia</option>
<option value="http://ipaddress4:port/">Japan</option>
<option value="http://ipaddress5:port/">South America</option>
</select>
<button type="button" id="btnSubmit" onclick="testRegion();"/>Test Server</button>
<button type="button" onclick="refreshIframe('http://helpdesk.mydomain.com/test/prompt.html');">Refresh Results</button>
</form>
<script>
function testRegion() {
var my_select = document.getElementById("SelectRegion");
var new_url = my_select.options[my_select.selectedIndex].value;
document.getElementById('resultsFrame').src = new_url;
}
function refreshIframe(myurl) {
document.getElementById('resultsFrame').src = myurl;
}
</script>
</body>
</html>
Then i have the page at http://helpdesk.mydomain.com/test/prompt.html display this
Please select a server from the drop down menu</br>
Then click "Test Server"</br>
I learned a lot here, about how scripts and buttons work.
Thanks
Well to make things easier give your iframe an ID first:
<iframe id="resultsFrame" name=resultsframe></iframe>
Then in your function:
<script>
function testRegion() {
var my_select = document.getElementById("SelectRegion");
var new_url = my_select.options[my_select.selectedIndex].value;
document.getElementById('resultsFrame').src = new_url;
}
</script>
And your "submit" button (changing it to a button element will prevent it from actually submitting the form, which we don't need to do since we're just firing a function):
<button type="button" id="btnSubmit" onclick="testRegion();"/>Test Server</button>
EDIT (Responding to Updates in Question):
Regarding the issue with your refreshing the iframe button/function, the problem is your button. When a button is in a form, it will default to a submit button. So when you click it, it actually submits the form, and since you have no action specified on the form, it defaults to the same page. The query string in your URL is the form submission data. To prevent a button in a form from submitting when it is clicked, change its type attribute to "button":
<button type="button" onclick="refreshIframe();">Refresh Results</button>
Regarding a custom error message when the iframe fails to load the source -- browser security restrictions will prevent you from accessing the contents of the iframe. There isn't much you can do from the parent page to edit the iframe innards if you're loading a domain different from the requesting domain. I'd suggest creating a new server-side script as a "proxy", then have that script do the work of checking the URL to see if its open/closed, and return a response to your iframe. So instead of applying the source URL to the iframe directly, you'd source your own server-side script "mydomain.com/test-url.php?src=ipaddress1" and return the error from your own script.
I need to fetch the offset info for a submit button that is buried deep within an iframe in a div. I want to position another element adjacent to the submit button after the iframe is loaded. The iframe is loaded from the same origin as the containing page.
<div id="editBox">
<iframe id="ifr" src="mysource">
<html>
<head></head>
<body>
<form id="dataForm" enctype="" method="POST" action="">
<div>
<table> some form elements </table>
<button id="submitButton" onclick="" type="submit">Save to file</button>
I've tried
$('#editBox').contents().find('#submitButton').offset();
and
$('#ifr').contents().find('#submitButton').offset()
But both return undefined.
I've also wrapped the .contents statements in a setTimeout to determine if the problem is that I'm checking before the iframe is loaded. (if that had worked I'd add a loaded event handler), but no change, result still undefined.
How can I get the position info I need?
Wrap your code in a load() function for the iframe. This works just like the document ready function, or window load function:
$("#ifr").on("load", function(){
var offset = $(this).contents().find('#submitButton').offset();
});
I am trying to make a refresh button, using an image (.jpg), in JavaScript for a website that every time it refreshes two images changes (uploaded from a database) but it wont work for some reason. This is my code so far:
<div align="center">
<SCRIPT LANGUAGE="JavaScript">
var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
s.src = "/Volumes/playground_people/s1267664/html/dwd/buttons/next_btn.jpg";
s.type = "image";
body.appendChild(s);
document.write('<form><input type=button value="Next" onClick="history.go()"></form>')
</script>
</div>
Since it does not get clear to me what you actually want to achieve I can only guess what could help you.
The first thing is that your "Next"-input is missing some quotation marks around the type:
document.write('<form><input type="button" value="Next" onClick="history.go()"></form>');
I would advise you to put the form directly into the div-container instead of using the document.write.
Are you trying to add the image in the script to the button you defined below?
Then you have to refer to it, e.g. with an id:
<div align="center">
<input type="button" id="nextBtn" value="Next" onClick="location.reload(true)">
<script language="JavaScript">
var b = document.getElementById("nextBtn");
b.src = "/Volumes/playground_people/s1267664/html/dwd/buttons/next_btn.jpg";
b.type = "image";
</script>
</div>
I also removed the form, since it sends the image coordinates to the reloaded page, and used location.reload instead of history.go().
This code adds the image to the button, which refreshes the page when clicked.