i'm using following page to display content of a url in a iframe and changing it based on input value .
<html>
<head>
<script type="text/javascript">
function changeUrl()
{
var url=document.getElementById('browseurl').value;
if(url!="")
{
if(url.indexOf("http")==-1)
{
url="http://"+url;
}
document.getElementById('browserWnd').src=url;
}
}
</script>
</head>
<body>
<div >
<span>Url</span>
<input id="browseurl" name="browseurl" type='textbox' />
<input id="browse" type='button' value="changeurl" onclick="changeUrl()" />
</div>
<iframe id="browserWnd" src="http://www.coolmath.com/" height="700" width="625"></iframe>
</div>
</body>
</html>
my problem is browsing some inner pages of an url loaded in iframe changes the parent window url instead of loading in iframe ...
for ex http://www.coolmath.com/ load in iframe but while browsing some links loads the entire page in parent window.
From www.coolmath.com:
if (window.self != window.top) ...
meaning the site activly escapes being framed.
You may notice that even something like this <iframe src='http://www.coolmath-games.com/0-fraction-splat/index.html'></iframe> results in the same. This is a technique called frame-busting. It's in their page's code:
<script>
<!-- Hide Script
if (top.location != self.location) {
top.location = self.location
}
//End Hide Script-->
</script>
If you have a server, that can respond with a HTTP/1.1 204 No Content header, you may be able to "deactivate" this frame buster as described here.
Related
I have an HTA, which in turn has an Iframe. We are loading an intranet website. A button in the HTA, when clicked, will automate some task. The first step is to login, wait for the next page to load, then perform next option. The main concern here is to know that the next page has been loaded completely, so that we can initiate the code related to page ?
Can some one shed light on how to achieve this. Just to repeat, IFrame is inside HTA.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(900,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='aa';
passwd.value='bb';
form.submit();
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById ("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="my URL" width="600" height="600" id="iframeid">
</div>
</body>
</html>
I want that:
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
Should run, only after the page in the IFrame has loaded properly and completely, since only then the relevant feilds will be loaded. Or else, this will give error.
PS This is a PeopleSoft site.
Here is a simple example of calling code when the iframe has loaded. Check out the onload attribute of the iframe tag. Maybe you can integrate this into your HTA?
<head>
<script>
function frameLoaded() {
alert('frame loaded!');
};
</script>
</head>
<body>
<iframe id="frame" src="https://en.wikipedia.org/wiki/HTML_element#Frames" onload="frameLoaded(this)" />
</body>
If you have access to the page, use javascript inter-window communication to trigger the JS you need. The child iframe can tell the parent when to run java script.
From a pure PeopleSoft perspective you can use related action framework component events to do what you like, too, without customization.
I think you can check the code for related content as reference. Such as OpenRCService and onRCService. In PT_COMMON, the showModalDialog method also related to the RC function which have the logic to detect a iframe is loaded.
Consider the following three pages.
Foo.html is opened locally in the browser, and so has a URL with prefix file:///.
Bar.html is in the same directory has Foo.html.
Bar2.html lives in /var/www and I am running Apache on localhost.
Foo.html
<html>
<head>
<script>
foo = function() {
alert("frame changed");
};
</script>
</head>
<body>
<iframe width="200" height="300" src="Bar.html" id="my-iframe" onLoad="foo" />
</body>
</html>
Bar.html
<html>
<body>
<iframe width="200" height="300" src="http://localhost/Bar2.html" id="my-iframe" />
</body>
</html>
Bar2.html
<html>
<head>
<script>
if (top.location != self.location){
parent.location = self.location;
}
</script>
</head>
<body>
<button type="button" onclick="document.location.href='http://bing.com'">Hello World</button>
</body>
</html>
When Foo.html is loaded in Firefox, by running firefox /path/to/Foo.html on the command line, the frame busting code in Bar2.html breaks out of Bar.html. At this point, the user gets an alert frame changed.
When I click the button, the iframe changes (the button vanishes), but I do not get an alert.
Why is the onLoad not firing the second time when the page changes?
The issue lays in the fact that when Bar2.html is being loaded by the iframe in Bar.html this condition is false
if (top.location != self.location)
As a result, when Bar.html is loading Bar2.html this is called
parent.location = self.location;
Which issues a redirect in the page and cancels the affect of the onload event since the page technically never finished loading.
Your script
if (top.location != self.location){
parent.location = self.location;
}
will run on Bar2.htm and change the location of its parent (previously Bar.htm). Then the alert comes.
Then, the script will run in the parent (previously Bar.htm) but top.location is still not equal to self.location . (top.location is now equal to Foo.htm and self.location is equal to Bar.htm ) so when you click the button, the parent page has been redirected to Bar2.htm . Meaning the alert code and the iframe is gone.
I want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>
And this I wrote in fill.js:
$(document).ready(function(e) {
$('#username').val('username');
$('#kennwort').val('password');
});
Here is a fiddle
If I do it with a .php file instead of a website, it works fine.
Here's a demo without website
Can someone give me a hint?
When you load a page from a different domain into an iframe, you can't do anything to the iframe page from JavaScript in your page.
As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?
The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.
In your working example, the code works because the username and password fields are not in an iframe from a different domain. They are part of the same page that the JavaScript code is in.
If the iframe is loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframe document instead of the main page document, but that's easy. But if the iframe is from a different domain, you are out of luck.
By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it).
you can implement it like:
test1.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
</head>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>
And test2.html :
<!DOCTYPE html>
<html>
<body>
<input type="text" name="user" id="user">
</body>
</html>
I have an iframe embedded in the page. Why we need to set the perent location Href from the iframe, any reason for that?
self.parent.location.href = blah blah blah;
That's usually a frame breaker technique.
Usually something like this:
if(self != top)top.location.href=someUrl;
As it's possible to put an iframe tag inside your page's body, you use top to manipulate the main window. See:
Main page
<!--This is the main page-->
<html>
<head>
<script>
alert(window.top.location.href);//The main page's URL
alert(window.self.location.href);//The main page's URL
alert(window.top.location.href);//The main page's URL
</script>
</head>
<body>
<iframe src="myFrame.html"></iframe>
</body>
</html>
myFrame.html
<html>
<head>
<script>
alert(window.location.href);//"myFrame.html"
alert(window.self.location.href);//"myFrame.html"
alert(window.top.location.href);//The main page's URL
</script>
</head>
<body>
</body>
</html>
I have an application which contains an iframe. I can modify the contents of the iframe, but not the whole page itself, e.g.:
<html><head></head>
<body>
<iframe>
<!-- my code -->
</iframe>
</body></html>
I have a requirement in which I need to change contents of the iframe to a different page (possibly on a different domain) and go back. Currently I do it like this:
The first page (it is inside the iframe executionPanelApplications):
<html>
<head>
<script type="text/javascript">
function replaceIFrameUrl() {
var doSubmit = "<c:out value='${param.doSubmit}'/>";
if (doSubmit == 1) {
document.forms['testForm'].submit();
}
else {
var adfUrl = "<fuego:fieldValue att='instJs.adfUrl' onlyValue='true'/>";
var bpmSrc = parent.document.getElementById('executionPanelApplications').src;
var bpmSrcParams = bpmSrc.split('&');
var activityId = (bpmSrcParams[1].split('='))[1];
var url = adfUrl +"&actionType=0&activityId="+activityId;
parent.document.getElementById('executionPanelApplications').src = url;
}
};
</script>
</head>
<body onload="replaceIFrameUrl();">
<form method="post" id="testForm" name="testForm" />
</body>
</html>
The second page (it should be inside the iframe executionPanelApplications as well):
<script>
function leave(e) {
var iframe = parent.parent.document.getElementById("executionPanelApplications");
iframe.src = url;
};
</script>
If both sites are in localhost it works like a charm. Unfortunatelly if they are in different domains - the second page is opened in a new window. Tested in ie 8. As i said - i can't change the contents of the page that contains the iframe. I can only work from inside the iframe. I need this to work only in ie.
Any ideas?
I would not use iframes, because there are different security restrictions (cross domain communication)
But I think, this one can help you: http://softwareas.com/cross-domain-communication-with-iframes