iframe across domain get value - javascript

How can I get the some value from other domain page?
for example
two page from different domain
test.html:
code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<span id="data"></span>
<iframe name="dd" src="http://otherdomain.com/innerpage.html" style="width:600px;height:500px;"></iframe>
</div>
</body>
</html>
innerpage.html(on another domain)
code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function SendDataToParent(){
var dataId = parent.document.getElementById("data"),
data = document.getElementById("iframeData").value;
dataId.innerHTML ="<input type='hidden' value='"+data+"' name='dataFromChildIframe'/>";
}
</script>
</head>
<body>
<div>
<button onclick="SendDataToParent();">SendDataToParent</button>
<input type="text" id ="iframeData" value="some content here">
</div>
</body>
</html>
I want to get input with the id of iframeData value ,and send this value to the parent page
but code don't work ,How to do this?

For security reasons, it is completely impossible to pages in two different domains to communicate on the client in current browsers.
As a workaround, you can use JSONP in both pages.

Related

Redirect routes in HTML using Javascript

I have 3 html files that I want to link together. The three files are button.html, option1.html, option2.html and all three files are stored in one src folder.
The button.html is a simple webpage that contains two buttons:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
</body>
</html>
and the two other .HTML file are regular pages each w/ different content.
<!DOCTYPE html>
<html>
<head>
<title>Option 1/2</title>
</head>
<body>
// different data contained for option1.html and option2.html
<h1>Heading for Option 1 or 2</h1>
<p>Paragraph for Option 1 or 2</p>
</body>
</html>
I'm not sure what I'm doing wrong but even with the onClick() functions for each buttons, the buttons won't link to the other HTML files.
I'm wondering if I should have some kind of link tag in the header for the two HTML files. Also, I'm not very certain about that location.href line does in the script tag of button.html file. I just found some resources online to try this out.
Also, I need to do this using ONLY Vanila Javascript, HTML and CSS.
Please help me out. Thanks!!
UPDATED : This will work, I believe. See, first of all, always add your script tag just before the closing body tag. The reason is because that, the code will not work in case the DOM elements it looking for would not have been rendered.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function() {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function() {
location.href = "./option2.html";
};
</script>
</body>
</html>
You need add the script tag before closing body tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button type="button" id="option1">Option 1</button>
<button type="button" id="option2">Option 2</button>
<script type="text/javascript">
document.getElementById("option1").onclick = function () {
location.href = "./option1.html";
};
document.getElementById("option2").onclick = function () {
location.href = "./option2.html";
};
</script>
</body>
</html>
There is this thing called a same origin policy https://javascript.info/cross-window-communication#can-t-get-but-can-set which could be affected by location.href, if you are previewing the files in the local storage as opposed to a web server. Try changing it to location="./option.html" etc, removing the hrer
Alternatively you can make an invisible a tag, set the hrer, and click it with JS
var a=document.createElement("a");
a.href="option1.html";
a.click() ;
and put that in your onclick function instead,
EDIT another thing just realized
The script tags are in the head part of the html, but the buttons are in the body, so try copying the script tags to the bottom of the body tag, underneath the buttons, or surround both onclick functions with window.onload=function {/*other code goes here*/}

JavaScript Redirect Issue

I'm building a cross-platform app with JavaScript. I want to redirect to a different page (in a different domain) but it is not working. I tried:
<html>
<head>
<script>
function redir() {
window.location.href = "http://www.example.com";
}
</script>
</head>
<body onload="redir()">
</body>
</html>
It gived me a blank page. I tried with a different code, I tried iframe like this:
<html>
<head>
</head>
<body>
<iframe src="http://www.example.com" />
</body>
</html>
But it didn't worked again. It gave me a blank iframe. Can someone help me?
function Redirect() {
window.location="https://www.tutorialspoint.com";
}
<form>
<input type="button" value="Redirect Me" onclick="Redirect();" />
</form>
<body onload="redir()"></body>

How to access html elements in iframe inside html tag

I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

window.parent.document working in firefox , but not in chrome and IE

My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'

Categories

Resources