OK, I've not used iframes for a long time but this problem is so basic I must be missing something really obvious.
I have a page (Page A) containing a link (to Page B in the same domain/folder as the parent) that I want to open in an iframe in Page A.
pageA.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
</head>
<body>
Load ...<br>
<iframe id="tgt"></iframe>
</body>
</html>
pageB.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
When the link is clicked pageB opens in a new page (as if the target id isn't present), not in the iframe in pageA.
What am I doing wrong?
=========================================================
OK, sorted that but now I need to do this using php generated JavaScript. Here is a very minimal example:
pageA.php (parent page):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
<?php
$srcPage = "/pageB.html";
echo "
<script>
function loadIframe() {
window.alert('Clicked, loading $srcPage');
document.getElementById('tgt').attr('src', '$srcPage');
}
</script>
";?>
</head>
<body>
<p id="load" onclick="loadIframe()">[Click me to load] ...</p>
<iframe id="tgt" name="tgt"></iframe>
</body>
</html>
pageB.html (page to load - same as before):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
The script executes (alert is displayed) but the page doesn't load.
Thanks
Nigel
You should add the attribute name="tgt" to your iframe.
open link in iframe
For your second question, you mixed jquery with plain javascript.
This is how you change the src of an iframe using plain javascript:
document.getElementById('iframeid').src = '$srcPage'
Related
Page1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>page1</h1>
<iframe src="" name="iframe1" id="iframe1"></iframe>
</body>
</html>
page1 contains the iframe1 which is empty and doesnt show anything in the beginning.
Page2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>page2</h1>
<iframe src="opening.php" name="iframe2" id="iframe2"></iframe>
</body>
</html>
page2 contains the iframe2 which shows opening.php.
opening.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
click
</body>
</html>
opening.php contains a link which has href=check.php and
check.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>alright</h1>
</body>
</html>
i want to open check.php from opening.php which is shown in iframe2 in page2, in page1's iframe1. please help!!
This would show up as "a" in chrome://history/. I'm asking for a way to change the title in history when doing some AJAX after page is loaded.
a.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<script src="a.js" async></script>
</body>
</html>
a.js:
document.title="abv";
Is it possible to fetch the window data of the "parent" window, from within a page loaded in a tag ?
I'm embedding a remote html file from https://test-static-app.herokuapp.com/ which simply outputs window.top and window.parent.top in the console.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
console.log('window.top', window.top.location);
console.log('window.parent.top', window.parent.top.location);
</script>
</head>
<body>
</body>
</html>
The result is for both values:
{}
Is it possible to get this data? How ?
I have small requirement that I am passing query string from demo1.html to demo2.html.
in demo2.html, there is back button(history.back()) so when user click back button it will redirect to demo1.html. in this demo1.html, I want to get querystring value or previous page url using javascript or jquery.
please find the demo html script below for your reference.
I need the query string value of demo2 page in demo1
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function display()
{
var wind = document.referrer;
var preUrl = window.location.protocol;
alert(wind);alert(preUrl);
}
</script>
<body>
Search Content of the document......
Search
Display
</body>
</html>
demo2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function goBack() {
window.history.back();
return false;
}
</script>
<body>
demo 2 Content of the document......
Back
</body>
</html>
Reards
siva
Save the query string in the href that acts as the back button, then use location.replace()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
demo 2 Content of the document......
Back
</body>
</html>
a) Use the solution offered ny user3036342. This won't make the actual browser Back button work as you want though.
b) Leave the query string alone and use cookies instead. Set the cookie in demo2 and make sure demo1 reloads (I found this but there might be a better way)
c) If the pages are on the same domain, you could use History API and AJAX to switch between demo1 and demo2. Then you have full control about what happens when user presses Back/Forward, but it will require some reading to understand.
See code below: I want Page 1 to alert "#testing"...
This works in C and FF but not in IE :S
Page 1:
This is the page that will be visited
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<iframe src="http://page2.com/#testing"></iframe>
</body>
</html>
Page 2:
This is the page of the iframe.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
alert(window.location.hash);
</script>
</body>
</html>
I confirm the problem! location.hash and window.location.hash are just empty if page is within cross-domain iframe in IE9 (didn't tested in older versions)!
Try to use window.frameElement.contentWindow.location.hash in IE