Here's the code:
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
</script>
</head>
<body>
<iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
</body>
</html>
I'm trying to make the file load a URL into <iframe>, but when it finishes loading the URL, it reloads because of the onload attribute. Is there another attribute I should use? Thanks in advance.
It's difficult to use an iframe on an online editor because of the sandbox environment but it'll behave normal under normal conditions. As a valid test, you can enter http://example.com it's whitelisted.
UPDATE
Added a PLUNKER since SO sandboxes iframes.
EDIT
I added another way to manipulate the iframe you might be interested in. Itonly involves HTML, no JS. Notice the anchor to example.com. Basically all you need to do is the following:
Add a name attribute to the iframe (I always have id and name the same)
On the anchor, you change the target attribute value to the value of the iframe's name value.
So in this demo the part inside {{{...}}} is the trick. The brackets are added for emphasis do not include them into the code to use.
<a href="http://example.com" {{{target="site"}}}>Example.com</a>
<iframe id="site" {{{name="site"}}} src="/" width="100%" height="100%" frameborder="0"></iframe>
function changeSrc(src) {
var iframe = document.getElementById('site');
iframe.src = src;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
overflow-y: auto;
}
<form id="form" onchange="changeSrc(url.value);">
<fieldset>
<legend>Enter URL</legend>
<input id="url">
</fieldset>
</form>
Example.com
<section>
<iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
</section>
try this
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
if(URL) document.getElementById('window').src = URL;
</script>
</head>
<body>
<iframe height="610px" width="1320" id="window">
</body>
</html>
the onload attribute you had on your iframe is fired when the iframe loads (and not when the page window loads), hence it setting the src again and then reloading the page into an endless loop.
<!DOCTYPE html>
<html>
<head>
<script>
var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
</script>
</head>
<body>
<iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
</body>
</html>
We can accomplish this by using java's DOM changing methods.
To get the SRC of something, you can type
document.getElementById('window').src = URL;
This will acquire the SRC attribute of the elemnt with the ID '#window', and then change the attribute to whatever you set it to.
Just be sure that the user enters a string.
Related
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."
I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.
From my research, it seems this should be possible with some JS but I'm struggling to figure it out.
So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?
<iframe src="" name="gallery"</iframe>
<iframe src="" name="info"</iframe>
Lot 1
Lot 2
You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through JS).
For example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = ['http://example.com/', 'http://example.net/'];
function setSource() {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource();">Click me</span>
</body>
</html>
If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var frm = ['gallery', 'info'];
var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']];
function setSource(num) {
for(i=0, l=frm.length; i<l; i++) {
document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i];
}
}
</script>
</head>
<body>
<iframe src="" name="gallery"></iframe>
<iframe src="" name="info"></iframe>
<span onclick="javascript: setSource(0);">Click me #0</span>
<span onclick="javascript: setSource(1);">Click me #1</span>
</body>
</html>
Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.
Please don't forget to close your tags.
Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).
The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.
This code works simply great :
<!DOCTYPE html>
<html>
<body>
<h1 style="display:flex;
justify-content:center;color:green;">
GeeksforGeeks
</h1>
<iframe src="about:blank" id="frame1"> </iframe>
<iframe src="about:blank" id="frame2"> </iframe>
<button id="update">Click me</button>
<script>
document.getElementById('update').addEventListener('click', function () {
// Change src attribute of iframes at a same time
document.getElementById('frame1').src ='https://www.google.com/search?q=java&igu=1';
document.getElementById('frame2').src ='https://www.google.com/search?q=farming&igu=1';
});
</script>
</body>
</html>
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'm trying to get the content of iframe in a javascript alert but, the alert appears empty
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
iframe {height:200px; width:300px; border:1px solid #000}
</style>
<script>
var iframe = document.getElementById("myFrame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
function newDoc() {
alert (document.getElementById('myFrame').innerHTML) ;
}
</script>
<body>
<iframe src="http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com" id="myFrame">
</iframe><br>
</br>
<img src="http://www.giftworksconnect.com/wp-content/uploads/2012/10/download.png" width="100" onclick="newDoc(); return false;" style=" cursor: pointer;" border="0" id="adflink" />
</body>
</html>
any help would be appreciated
Regards
Edit:
I'm trying to get the contents of an IFRAME because I'm using Adf.ly
Api
"http://api.adf.ly/api.php?key=c02fe2b360ee4b566a4f1e14d84b279b&uid=3141484&advert_type=banner&domain=adf.ly&url=http://somewebsite.com"
But this api respond with a blank page with the shortend url I want to
use the shortened url directly in my site script
I guess your main (parent) page is on another domain. In this case your access to the iframe content is forbidden due to cross-domain restrictions.
If you don't have control over the inner page (api.adf.ly/api.php) you can't handle it on with the client-side code on your page.
replace Your below line
alert (document.getElementById('myFrame').innerHTML) ;
with the below
alert(document.getElementById('myFrame').src);
Think it will work for You.