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.
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 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
this is my html:
<!DOCTYPE html>
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
</body>
</html>
The html is opening fine, but my left and right html documents aren't showing up. This may be from not correctly typing in the code. Was there anything I did wrong?
Is there any way I can reference my left and right html documents to this without using iframes?
The load function attempts to make an ajax call to the location specified (remember, here in JavaScript we're on the client), so unless you specify absolute URLs, it won't retrieve from the correct location.
Furthermore, assuming that left.html and right.html are complete documents including doctype and <head> etc, that would produce invalid HTML.
Try the following:
<html>
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<link href="final%20project.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe id="left" frameborder="0" style="border: 0;" src="left.html"></iframe>
<iframe id="right" frameborder="0" style="border: 0;" src="right.html"></iframe>
</body>
</html>
While it's not perfect, it should at least display the pages correctly.
I'm new to JavaScript and just want to put my JavaScript code in another file.
This is my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" scr = "testing.js"></script>//this contains the function I want to call
</head>
<body id="body">
<button type="button", onclick="showDate()">show the date</button>
</body>
</html>
This is the testing.js file:
function showDate() {
alert ("this works")
}
I'm assuming that I just make a beginner mistake because it seems really common but I can't figure it out.
you spelled the 'src' attribute incorrectly on your tag
you spelled it scr, it should be src
this:
<script type="text/javascript" scr = "testing.js"></script>
should be this:
<script type="text/javascript" src = "testing.js"></script>
change the button to
<button type="button" onclick="showDate()">show the date</button>
and change scr to src
EDIT: source that works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>my badass page</title>
<script type="text/javascript" src="testing.js">
</script>
</head>
<body id="body">
<button type="button" onclick="showDate();">show the date</button>
</body>
</html>
Quick use of html validator such as http://validator.w3.org/nu/ will uncover lots of problems in your code. Just copy paste and correct the errors.