I want to run function click on spesific id inside a frame, so i make two html file and i write the script like this
the main html is this index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function autoClick(){
document.getElementById('framing').contentWindow.document.getElementById('trig').click();
}
</script>
</head>
<body onload="autoClick();">
<iframe name="framing" id="framing" src="testing.html" frameborder="0" scrolling="no" height="1200px" width="100%"></iframe>
</body>
</html>
and another one is the testing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onbeforeunload = function(){
return false; // This will stop the redirecting.
}
</script>
</head>
<body>
<div>
<a id="trig" href='http://www.redirect.com/' target='iName'>Home</a>
</div>
<iframe src="about:blank" name="iName" frameborder="0" scrolling="no" height="1200px" width="100%"></iframe>
</body>
</html>
so when index.html finish load the page, i want the function to click on the <a id=trig" href='http://www.redirect.com/' target='iName'>Home</a>
on testing.html that inside frame framing
and when it clicked, the trig will load a site http://www.redirect.com that will be contained inside iName frame, but the site http://www.redirect.com have a script that will redirect the TLD to the their site, so i put the script for preventing the page to break out the iframe `
window.onbeforeunload = function(){
return false; // This will stop the redirecting.
}
this two html file is hosted on same domain. but when i try to run it, the function click is not triggered, anyone can help me?
Thank you, and sorry for the bad english, it is not my native language
Related
I'm working on bringing a website up to current standards and removing frames. We have a page for printing multiple documents. When you load the page, it prints all the documents individually, but only asks you to pick your printer once. Here is a simplified version of the code (tested, working)
<!DOCTYPE html>
<html>
<head>
<title>Print test</title>
<script>
function printAll() {
printAllForms.focus();
if (window.print) {
window.print();
}
}
</script>
</head>
<frameset rows="20%,*" id="printAllForms" onload="printAll()">
<frame id="form1" src="page1.html">
<frame id="form2" src="page2.html">
<noframes>You need the frames</noframes>
</frameset>
</html>
I was thinking it might be better to use iFrames. Based on other similar questions, I came up with this:
<!DOCTYPE html>
<html>
<head>
<title>Print test</title>
<script>
function printPage() {
for (var k = 0; k < window.frames.length; k++) {
window.frames[k].focus();
window.frames[k].print();
}
}
</script>
</head>
<body>
<iframe id="form1" src="page1.html"></iframe>
<iframe id="form2" src="page2.html"></iframe>
<button id="btnPrint" onclick="printPage()">Print</button>
</body>
</html>
This works, BUT it shows a dialog every time.
Another method I'm working on is to load DIVs with the data. It will print all as one document. This can be an issue if the user is printing double sided and there is a document with an odd number of pages.
Any help is greatly appreciated. Thank You.
I have some problems calling a function of a specific iframe after reloading another iframe. It works on all major browser but behaves a little weird on Microsoft Edge. You will need the following constellation to get the error. All files are in the same directory on the same server. I haven't set any Content Security Policy.
If you load the Frame1.html everything will be fine and you will get the "alert" message.
But if you click the "Click me" a-tag on the frame4.html, the frame2.html will be reloaded and you will get the "permission denied" error because the parent object (var tmpParent = parent;) is not accessible. If you click the a-tag again it will work without any error.
I think it is a Edge bug, because all other browser can handle it and it only occur on the first click.
The error will also occur if you use top insted of parent.
The code of topFrame.js is used to find the top-most Frame of my site.
I cannot simply use top because it should be possible to embed my site.
Does anybody have a clue?
Thanks a lot!
Frame1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
<script type="text/javascript">
var topFrame = this;
function myAlert() {
alert('alert');
}
</script>
</head>
<body>
<iframe id="overallContentWrapper" name="mainFrame" src="frame2.html" frameborder="0"></iframe>
</body>
</html>
Frame2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
<script src="topFrame.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("load", function load(event) {
window.removeEventListener("load", load, false);
try {
topFrame.myAlert();
} catch (e) {
alert(e);
}
}, false);
</script>
</head>
<body>
<iframe name="subFrame" src="frame3.html" frameborder="0"></iframe>
</body>
</html>
Frame3.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 3</title>
</head>
<body>
<iframe name="subsubFrame" src="frame4.html" frameborder="0"></iframe>
</body>
</html>
Frame4.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 4</title>
</head>
<body>
Click me
</body>
</html>
topFrame.js
try {
var tmpParent = parent;
var topFrame = tmpParent.topFrame;
while (topFrame === undefined) {
tmpParent = tmpParent.parent;
topFrame = tmpParent.topFrame;
}
} catch (e) {
alert(e);
}
Well i know im putting my neck on the line here trying to guess what IE is trying to tell you but i would assume that using this type of communications is going against what iframes are intended to do.
If you wish to communicate between child frames to parnet frames i suggest using postMessages instead. I think(I did say think) your script is getting blocked against XSS - cross site scripting. So if you wish to communicate some information between parent frame and child frames or the other way around i suggest having a look at postMessges.
I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...
I want to be able to open a popup using window.open and subscribe to page events (onload etc) of the popup in the opener. So i'd want a method in my opener (parent page) to execute when the popup's onload or ready fires. Is this possible using plain js or jquery? Pls don't ask me why i want to do this - this can solve a lot of issues for me.
First page (x.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open('y.html', 'w');
w.document.getElementById('target').onclick = function () { alert('!'); };
</script>
</body>
</html>
Second page (y.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="target">target</button>
</body>
</html>
Works for me...
I've got a page that has an iframe. Every time the page loads, iframe gets unique id and name assigned to it. I can get the iframe name within loaded iframe like so:
alert(parent.window.frames[window.name].name);
But when i try to get the id value:
alert(parent.window.frames[window.name].id);
I get undefined?
Is it possible to get the id attribute of the iframe within loaded page?
http://jsfiddle.net/cqFtB/
<iframe id="lyygi8stwZSANUEh" src="http://example.com" name="zma82vRVe18xbAqW" title="Awesome Iframe">
example.com:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Iframe</title>
</head>
<body>
<script type="text/javascript">
alert(parent.window.frames[window.name].name);
</script>
</body>
</html>
Try window.frameElement.id in the iframe.
In the iframe this is working for me. But only if the iframe and the parent share the same domain:
this.frameElement.attributes.id
You have to insert the name of the iframe:
alert(parent.window.frames['zma82vRVe18xbAqW'].name);