I am using a 3rd party chat service that makes you use iframe to host your own chat. They allow you to place html and javascript so I was wondering how i can add a button to clear the forms in the "formsframe" iframe
main frame
<iframe src="http://www.chat.com/529552/?main" name="mainframe" id="mainframe"></iframe>
forms frame
<iframe src="http://www.chat.com/529552/?forms" name="formframe" id="formframe"></iframe>
forms names:
name, email, message
$(document).ready(function() {
$('#formframe').ready(function() {
$('#formframe').content().find('form').append('<input type="reset" value="Reset" />');
});
});
Related
I have been trying to get this to work for 2 weeks now but I am stumped on this which is probably very simple. I am new to js.
I have multiple links on a page along with a form embedded in an iframe. Same domain, same page, both using https. The form is from a form script and is embedded in the page using:
<div id="my_placeholder"
data-formurl="https://www.example.com/forms/embed.php?id=7777"
data-formheight="1268"
data-paddingbottom="10">
</div>
<script src="https://www.example.com/forms/js/jquery.min.js"></script>
<script src="https://www.example.com/forms/js/jquery.postmessage.min.js"></script>
<script src="https://www.example.com/forms/js/form_loader.js"></script>
Using that code it automatically puts the form in an iframe. The input field ID within the form i'd like to fill is #element_11
So far, I have the following code which works exactly as I'd like but the generic form code is not in an iframe
Link1
<br />
Link2
<br />
Link3
<form>
<input type="text" id="element_11" />
</form>
<script type="text/javascript">
function reply_click(element)
{
document.getElementById('element_11').value = element.getAttribute('data-filled-value');
}
</script>
How can I accomplish this? I have searched and searched but every post I've come across wants to target the iframe and "submit" the form or "close" the iframe or "fill in one form and have it go to another form in an iframe".
Use .contents() to access the contents of an iframe.
function reply_click(element)
{
$("#iframeID").contents().find("#element_11").val(element.dataset.filledValue);
}
Replace iframeID with the actual ID of the iframe.
I'm trying to make it possible to highlight some words on the page where my iframe with a search field is embedded.
The idea is that a user enters the search terms inside the iframe and the iframe sends a command to highlight those words on the page where it's embedded.
I can find how to reload the page from the iframe - but how do I perform some actions on that page without reloading it - triggering those actions from the iframe?
Or should I embed the form using JavaScript to make it easier?
Thanks!
You are not allowed to do this because of same-origin policy. Instead load the contents of the iframe using JavaScript, or instead reload the iframe with the query given as a parameter to the URL.
iframe example:
// base url
var url = "http://myhomepage.com?q="
$("#button").click(function(){
// get search keyword
var key = $("#search").val();
// get iframe reference and update its source
var iframe = $("#iframe");
iframe.attr('src',url+key);
});
<input type="text" id="search" />
<input type="button" id="button" value="go!"><br />
<iframe id="iframe" src="http://myhomepage.com" />
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.
How to call a javascript function in ifram from parent window.
i have a jsp page which contains an iframe.
jsp page is served by "a.yenama.net" server and iframe is served "b.yenama.net" server.
<iframe width="1200" height="640" name="data" id="dataId" >
</iframe>
<br/>
<input type="button" name="data" value="Save data" onclick="callSaveData();" />
tried below code from parent jsp page and recieved permission denied error in IE
window.frames['data'].callData();
also tried
document.getElementById('dataId').contentWindow.callData(); //didn't work
Function in iframe
window.callData = function(){
alert('Iframe function');
}
your help is truly appreciated.
you can do that by declaring your function in a common .js file
Therefore, you can access your function from wherever you want.
Have a nice day
i would suggest you to use jquery.load method instead of iframe to load your second page in a div of first page and then you can call any methods from both the pages
$('#result').load('PageWhichYouAreOpeningInIFrame.html');
or if you still wants to go with IFrame then you can use:
Invoking JavaScript code in an iframe from the parent page
http://api.jquery.com/load/
I have an iframe I'm using to pull in some content hosted by a 3rd party vendor to our website. We are trying to determine the height of that content to adjust the iframe height but I'm getting cross site scripting errors. I wasn't aware that sub-domains count as a cross-site. Is there some way around this without having to keep them on matching sub-domains?
For reference, our weekly marketing is hosted by the 3rd party vendor in flash but with the sub-domain we can redirect to them while keeping the user on our domains for cookie purposes.
From one of your subdomains, you can (with some exceptions) set the domain to allow broader access to other subdomains in the same main domain.
Take a look at this page:
http://www.tomhoppe.com/index.php/2008/03/cross-sub-domain-javascript-ajax-iframe-etc/
Also take a look at cross window messaging
This first page is the sender - it's calling postMessage (sending the textual message) and also holds the iframe within which the receiving window is held.
<iframe src="http://dev.jquery.com/~john/message/" id="iframe"></iframe>
<form id="form">
<input type="text" id="msg" value="Message to send"/>
<input type="submit"/>
</form>
<script>
window.onload = function(){
var win = document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit = function(e){
win.postMessage( document.getElementById("msg").value );
e.preventDefault();
};
};
</script>
The follow page is the receiver - it has an event listener bound which watches for messages being passed to it and injects them in to the DOM.
<b>This iframe is located on dev.jquery.com</b>
<div id="test">Send me a message!</div>
<script>
document.addEventListener("message", function(e){
document.getElementById("test").textContent =
e.domain + " said: " + e.data;
}, false);
</script>