DON'T REPORT YET - READ FIRST
I'm trying to make a textbox and a button, then a iframe that whenever you press the button it goes to the URL in the textbox. I have tried:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
But... It doesn't work for me. You see, this script also changes the page url, and since I see this trough a iframe on my website, it just doesn't work. If anyone knows a way around this or a different way to do it, please tell me! :) have a nice day!
you can, you have many pure js options:
var el = document.getElementById('ifrm');
el.src = url; // assign url to src property
window.frames['ifrm'].location = url;
//or
window.frames['ifrm'].location.replace(url);
if is your page you can just make links
link
but remeber that will only work in the same origin.
"It is generally possible to load documents from other domains in iframes. However, it would not be possible for the containing document to make a reference to the document inside the iframe due to the restrictions of the Same Origin Policy. Also, the page from the other domain could contain code that would prevent its being loaded in your iframe."
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.
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>
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'm currently trying to write a JavaScript function that will take a URL from a form once the user has entered it into a textbox and clicked a button to open in a new window that contains an iframe. Here's what I currently have:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
label {
display:block;
}
</style>
<script type="text/javascript">
function goTo() {
var url = document.forms[0].url.value;
myWindow = window.open('', '', 'width=800,height=800');
myWindow.document.write("<iframe src='url'></iframe>");
myWindow.focus();
return false;
}
</script>
</head>
<body>
<form action="" method="get" onsubmit="return goTo()">
<label for="url">Enter the URL:
<input type="text" name="url" id="url">
<input type="submit" value="Submit">
</form>
</body>
</html>
The main problem I'm currently having is determining how to pass the url variable into the document.write() method. It will work fine when I try a typical source URL in the iframe, but naturually that defeats the purpose since I want to use a user passed-in value. Any assistance is welcomed, I have no vanity-of-authorship so if I'm fundamentally doing things wrong, I'm ok with that -- seeking you pros to let me know.
The url variable is part of a string in your example. Try this instead. Also, make sure that it's a valid URL.
myWindow.document.write("<iframe src='"+ url +"'></iframe>");
I might also add that writing an iframe in the new window is a bit redundant. you should just do
myWindow = window.open(url, "", "width=800,height=800");
I'm trying to change the location of an adjacent frame on page load with Javascript.
I have a page with a frameset:
<html lang="en">
<HEAD>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script type="text/javascript">
function confirm() {
//Code to execute before page close
return '[close message]';
}
window.onbeforeunload=confirm;
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="leftFrame" src="control.php" scrolling="no">
<frame name="right" id="right" src="q.php">
</frameset>
</head>
</html>
My leftFrame is control.php, which has a form whose action is also control.php:
<!-- sample form on control.php -->
<form method="post" action="control.php">
<input ../>
<input type="submit" />
</form>
The idea is that every time the form is submitted, the right frame is supposed to reload back to q.php:
<script language="javascript">
function refresh() {
parent.right.location.href ="q.php";
}
</script>
</head>
<body onLoad="refresh();">
But this is not working. The right frame stays as is and doesn't change back to q.php. in other words refresh() isn't working.
Can anyone tell me what I'm doing wrong, or a better way to do this?
instead of onload i used onsubmit. my guess is that it wasn't working onload because the page was already loaded.
havent seen frames used in a long time,
i think the issue is the way you are calling the frame, try
top.frames["right"].location.href="q.php";