Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Related
This is what I have tried, couple of other things too, no luck.
This too, document.getElementsByName('btnK')[0].submit();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function click()
{
$('#myiframe').document.getElementsByName('btnK')[0].submit();
}
</script>
</head>
<body>
<iframe id="myiframe" src="http://google.com"></iframe>
<button type="button" onClick="click()">Logg inn</button>
<object type="text/html" data="http://google.no" width="100%" height="1000px"></object>
</body>
</html>
It is impossible because of the Same Origin Policy.
Do you want someone to load your bank account in an iframe on some random page and start clicking buttons? No, that is why this security measure is in place.
I have made javascript bookmarklet for firefox. Now i want to access it in javascript like other document/ DOM elements are accessed through their id or class. Please anybody tell me how i can access my javascript bookmarklet . Actually i want to make it blink /change it color by accessing it.
My bookmarklet code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<div id="toolbar" >
<a id='button' href='javascript:alert("my bookmarklet");'
>Lysted</a>
</div>
</body>
</html>
Now i want to access bookmarklet in "script tags/ javascript". Please please help anybody
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
I have following 2 files as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function init(){
document.getElementById("mytest").innerHTML= "Results after rendering...";
}
</script>
<body onload="init();"><div id="mytest">OK</div>
</body>
</html>
The second page usually give the alert popup all source code of first page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
xmlhttp.open("GET", "test.html",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)
</script>
<body>
</body>
</html>
All I want to do is I would like to get ONLY source code after rendering. How can get all code after rendering instead of getting all original code. So i can read < div id="mytest">Results after rendering...< / div> when I try with XMLHTTP. How can I do how to get the code which are already render for page, I want only with classic Javascript or DOM, I don't want with Jquery, JSON, Mootool at all. thanks in advance.
Instead of loading the page with ajax, use your browser's iframe support to your advantage.
Change the second file that alerts the HTML source to something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function displayAlert()
{
alert(document.getElementById('iframe').contentDocument.body.innerHTML);
}
</script>
<body onload="displayAlert()">
<iframe src="test.html" id="iframe" style="display:none;"></iframe>
</body>
</html>
This will load test.html in an invisible iframe. Your browser will automatically render test.html inside the iframe and will call displayAlert() when it is done. displayAlert() will grab the the source code inside the iframe and alert it. However, this solution will only work if test.html is on the same server as the script above. If test.html is on a completely different server, this solution will not work because the permission to access the iframe will be denied. If this is the case, I can let you know of another solution that will bypass this.
I'm not sure I know what you're really asking, but why not just get:
alert(document.body.innerHTML);
to get the actual rendered body HTML with any changes that have been made by scripts upon loading.
Note: even unmodified parts of innerHTML will not always compare exactly to the original source HTML because in some cases browsers are reconstituting the innerHTML from some other parsed data form so attributes may not have the same quoting or be in the same order and capitalization may not be the same.
I have a html main.html as given
----- main.html----------------
<title>FlexTrail</title>
<script src="main.js"></script>
<frameset rows='200,200'>
<frame id='one' src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder='0' />
<frame id='two' src="" frameborder='0' />
</frameset>
</head>
<body >
</body>
here the first frame contains a html generated by Flex Builder 3 and on button click on that flex project i am calling function func2() in main.js using External Interface.
---- main.js-----------------
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html";
parent.frames['two'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project2/bin-debug/project2.html";
}
I want the other file to open in same window bellow the first one.But the problem here is when i run this in IE8 the other frame opens in a different window but in Firefox im not getting any respose.
Note:- Javascript is enabled in both browsers and popup are not blocked
Plz tell me where i m wrong
Thanks in advance
Prashant Dubey
Your frameset is wrong. A frameset is not a page, so it doesn't have a body:
<html>
<head>
<title>FlexTrail</title>
<script src="main.js"></script>
</head>
<frameset rows='200,200'>
<frame id="one" src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder="0" />
<frame id="two" src="" frameborder="0" />
</frameset>
</html>
Ok, found fix. Need to add NAME tag to Frames as well as ID tags. Also need properly formatted frameset tags as others have answered, but without NAME tag it still won't work.
Edit (again): Also, noticed your other quest about multiple files and single script. I just dumped the script inline for my example below, but you could make it a .js file as well. Rather load it to all html files, you could just use parent.function() style js calls in the secondary files that get loaded into frames. Again, depends on how much code is there and what you are trying to do etc. Mileage may vary. =) (You'll notice I didn't need to add script in my 1.html file.)
See below...
Main html:
<HTML>
<HEAD>
<TITLE> Title Goes here </TITLE>
<script type="text/javascript">
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="1.html";
parent.frames['two'].location="3.html";
}
</script></HEAD>
<FRAMESET rows="115,*">
<FRAME SRC="1.html" ID="one" name="one">
<FRAME SRC="2.html" ID="two" name="two">
</FRAMESET>
</HTML>
Then, 1.html:
<HTML>
<HEAD>
<TITLE> Cow goes Moo </TITLE>
</HEAD>
<body>
One.html
<input onclick="parent.func2();" id="Button1" type="button" value="button" />
</body>
</HTML>
2.html and 3.html can be anything really, doesn't matter.
The problem with this setup is that IE looks for the ID tag in the javascript, but FireFox is looking for NAME attribute of the frame. Above pages work in IE, FF and Chrome.
Here is an example with iframes that may help
Main.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function loadTwo()
{
document.getElementById('two').src = 'two.htm'
document.getElementById('two').style.display='block';
}
function loadThree()
{
document.getElementById('two').src = 'three.htm'
document.getElementById('two').style.display='block';
}
</script>
<title>Untitled Page</title>
</head>
<body>
<iframe id="one" src="One.htm"></iframe>
<iframe id="two" style="display: none" src="Two.htm"></iframe>
</body>
</html>
One.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function load2_onclick() {
parent.loadTwo()
}
function load3_onclick() {
parent.loadThree()
}
// ]]>
</script>
</head>
<body bgcolor="#ff0000">
<input id="load2" type="button" value="Load 2" onclick="return load2_onclick()" />
<input id="load3" type="button" value="Load 3" onclick="return load3_onclick()" />
</body>
</html>
Two.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body bgcolor="#00ff00">
</body>
</html>
Three.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body style="background-color: #0000ff">
</body>
</html>
Frames were used to segmentate webpages, just like slices in design tools. They cannot overlap each other.
Maybe you could achieve what you want by using iframes instead of using a frameset. See this site for a demonstration.
But then again, I wouldn't be surprised if there are browsers that do not support overlapping iframes.