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
Related
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";
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'
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.
I had recently posted a question regarding my problem here.
When i click on a SUBMIT BUTTON or a LINK, I do not want the history of the page where the user clicked the BUTTON or LINK to get recorded in browser.
I received a suggestion to use history.pushState(). But I am not familiar with the function and I urgently need the solution to work.
I still not sure as to what to do. But can anyone suggest me whether I can use this to solve my problem.
<input type="submit" onclick="location.replace(this.href); return false;"/>
Continue
Example : I have a page bar.html which has a link Foo. When the user clicks on the link, he should be redirected to foo.html and browser history of bar.html should not get recorded so that the user cannot use BACK button to get back on this page.
Edit: Also how can I force the browser not to store a certain page in cache, so the next time user visits, the browser requests the server for the page.
For chnage page with JS, use code like this:
Continue
But i don't sure about it history work.
Here is an working example:
File: a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<h1>A</h1>
B
</body>
</html>
File: b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
<script>
window.location.replace('c.html');
</script>
</head>
<body>
<h1>B</h1>
C
</body>
</html>
File: c.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<h1>C</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Remote Control</title>
</head>
<link rel="stylesheet" href="/../.." type="text/css" />
<title>page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" SRC="popup.js" > </script> <!-- <---- Problem, doesn't work in FF but ok in IE/Chrome -->
<body>
The script doesn't execute on Firefox like it does on IE and chrome. Why is this?
Could anyone tell me what needs to be done to make it work in FF?
Your popup.js file is full of references to a method called document.getelementbyid. There is no such method in JavaScript because its a case-sensitive language and thats the reason your code breaks right at the beginning of the hidep1() function.:
if (document.getelementbyid) {
Replace all occurrences of getelementbyid with getElementById and try again.