i have a problem with this code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script language="javascript">
function callWeb(){
document.getElementById("myIframe").src = "MY NEW URL PHP";
}
</script>
</head>
<body>
<iframe id="myIframe" src=""></iframe>
<button onclick="callWeb()">GO</button>
</body>
</html>
When I try to execute the javascript method callWeb I receive the error:
"Refused to display 'MY NEW URL PHP' in a frame because it set 'X-Frame-Options' to 'DENY'."
I tried to execute it in web first but I'm interested just to let it works in phonegap.
Thanks in advance.
Regards
Related
Hello I want to autofill data in iframe on cross domain.I have a code but it's not working. please help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function autoFill() {
var f=fm.document.forms[0];
f.form-control.value='Zanne';
f.submit();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="autoFill();">autoFill</button>
</div>
<iframe name="fm" id="fm" src="url.com" width="100%" height="100%"></iframe>
</body>
</html>
the input filled:
Have any way to do this.
This is going to be a CORS violation.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
There are some workarounds to this. You have to use the postMessage API. Your parent window would need to send JavaScript events to the iFrame, which would need to have an event listener and react to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
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.
This is what I have tried, couple of other things too, no luck.
This too, document.getElementsByName('btnK')[0].submit();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function click()
{
$('#myiframe').document.getElementsByName('btnK')[0].submit();
}
</script>
</head>
<body>
<iframe id="myiframe" src="http://google.com"></iframe>
<button type="button" onClick="click()">Logg inn</button>
<object type="text/html" data="http://google.no" width="100%" height="1000px"></object>
</body>
</html>
It is impossible because of the Same Origin Policy.
Do you want someone to load your bank account in an iframe on some random page and start clicking buttons? No, that is why this security measure is in place.
My index.html has a button(id="my-btn"):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/my.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be opened with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/test.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
In the new page, test.js will be invoked and it will append the text "JOHN" as the content of this page
js/test.js
$(document).ready(function(){
$("#my-name").append("<strong>JOHN</strong>");
});
But, when the test.html page opened in a new popped up browser window, I did not see the text "JOHN", it is an empty page, why?
(I have jquery-1.5.1.js under "js/" directory, and all JavaScript files are under js/)
Pretty simple here...
You're calling $(document).ready... before $ is defined.
This happens in the jquery, so you need to switch up your script order:
<script src="js/jquery-1.5.1.js"></script>
<script src="js/test.js"></script>
The content of test.js depends on jQuery, but you don't try to load jQuery until after you have executed everything in test.js.
Switch the script elements around.