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>
Related
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.
I know there are many topics about it, but none of them worked. I need just to get iframe content(not source code).
I have a form, that posts some parameters to another server and I target it to iframe(that lies on the same page). So I receive server responce code storred in my iframe without page refresh:
<form name='vin_form' id='file_upload_form' action='*****' method='post'>
<input name='name1' value='value1'>
<input name='name2' value='value2' type='hidden'>
<input name='name3' value='value3' type='hidden'>
<div onclick=\"document.getElementById('file_upload_form').target = 'upload_target'; document.vin_form.submit();\">Send form</div>
</form>";
<iframe id='upload_target' name='upload_target'></iframe>
To get iframe content I used everything, but nothing worked:
jQuery('#upload_target').load(function()
{
alert(jQuery('#upload_target').contents().find('body').html());
var myIFrame = document.getElementById('upload_target');
var content = myIFrame.contentWindow.document.body.innerHTML;
alert(content);
alert(window.frames.upload_target.document.body);
}
);
I read about "same origin policy", but I think it shouldn't be forbidden in my case, because I can access that page by url and read all the code, so why I can't do it programmatically?
P.S.: Are there some other ways to get form responce code from another server? (php curl doesn't work because of some site framework defence)
*update - try this:
var t = document.getElementById("upload_target");
var y =( t.contentWindow || t.contentDocument);
alert(y.document.body.innerHTML)
I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project
Assuming this is not a cross-domain issue, try:
var body = $('#testFrame').contents().find('body');
Since this cross domain you have two options.
if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.
Or
you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.
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" />');
});
});