I have a index.html page, which contains a buttonid="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/jquery-1.5.1.js"></script>
<script src="js/my.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be popped up 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/jquery-1.5.1.js"></script>
<script src="js/test.js"></script>
</body>
</html>
Every thing is working fine in FireFox, but I got problem in IE 7.
In IE 7, when my-btn is clicked, the new window is not popped up, instead, I got error message "Invalid argument" which is point to my js code window.open('test.html', 'testwindow');, how to make it working in IE then???
Try window.open('test.html',''); (according to this question/answer ie8 var w= window.open() - "Message: Invalid argument.")
Read this.. The problem lies with you second argument..
Related
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
I am using the zurb foundation and all is working well except for data-alert. I am unable to close data-alert with the X. In other posts, people say to add the $(document.foundation(); again after the data-alert div. I have tried it with and without the second initialization. Here is the code.
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div data-alert class="alert-box alert radius hide-for-print">You can't close this!!!×</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I would appreciate any help I can get on this.. Thanks.
The data-alert was not closing because modernizr wasn't included in your project.
DEMO
Mostly this kind of errors you can solve by checking the console.
In console, It was showing the following error:
ReferenceError: Can't find variable: Modernizr
Because foundation.min.js required modernizr to work
I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.
I have a page that has a cross-domain iframe. On the page loaded in the iframe is a print button that runs some javascript to print an iframe named printFrame sitting on the page (on the nested page, not on the parent page). When I click on the button, in FF it works but IE gives me an error: frames.printFrame is null or not an object. I'm confused. The code is not trying to access the parent document, why isn't it working?
The code crashes on line 9 of iframedoc.html, when I try to access the printframe
Parent document HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<iframe src="http://www.otherdomain.com/iframeDoc.html"/>
</body>
</html>
iframedoc.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function printContent(){
frames['printFrame'].focus();
var printFrameDiv = frames['printFrame'].document.getElementById("printDiv");
printFrameDiv.innerHTML = document.getElementById('printableContent').innerHTML;
frames['printFrame'].print();
window.focus();
}
</script>
</head>
<body>
<iframe id="printFrame" name="printFrame" src="/printFrame.html"></iframe>
<div id="mainContent">
<div id="printableContent">
My printable content is here
</div>
<div id="nonPrintableContent">
Content that I dont want to print is here
</div>
Print
</body>
</html>