Following code is working fine for me IE but not working in Chrome.
i want to open the link in same page in HTML by java script
<SCRIPT LANGUAGE="javascript">
function clickHandler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
if(xsp.charAt(0)=="M") {
var oC=document.getElementById("C"+xsp.substr(1));
if(oC.style.display=="none")
oC.style.display="";
else
oC.style.display="none";
}
}
</SCRIPT>
html code is as following
<html>
<BODY onClick = "clickHandler();">
<a href="javascript:void(0)">
<u><b><span id=M26>2011-2012</span></b></u>
</a>
<div id=c26 STYLE="display:none">
<a href="javascript:void(0)">
<u><b><span id=M27>2012-2013</span></b></u>
</a>
</div>
<div id=c27 STYLE="display:none">
</div>
</body>
</html>
You use a upperCase C inside the function, but the ID starts with a lowercase c
var oC=document.getElementById("C"+xsp.substr(1));
has to be
var oC=document.getElementById("c"+xsp.substr(1));
Requested modification(you must remove the onclick from the body-element)
<script>
document.onclick=function(e){
var _this=(window.event)//reference to the clicked element
? event.srcElement//IE
: e.target;//others
if(_this.id.match(/^M(\d+)$/)){//extract the number
try{
var oC=document.getElementById("c"+RegExp.$1);//target-element
oC.style.display=(oC.style.display=='none')//set the display
?''
:'none'
}catch(e){}
}
}
</script>
Related
hi I'm trying to target a button to a div using iframe .. I tried so much but no result...
<html>
<body>
<div id="one">
<button type="submit" onclick="ShowResult()" formtarget="result"> Calculate </button>
</div>
<div id="two">
<iframe name="result"></iframe>
</div>
</body>
javascript:
function ShowResult()
{
document.write("someword");
}
it seems true but when I click the button it open a blank page showing what in the function.. help ??
You are missing alot,
First do not practice "onclick()" anymore.
Second do not practice "document.write" anymore.
I have rewrite your code, enjoy..
HTML
<div id="one">
<button type="submit" id="functionThis" formtarget="result"> Calculate </button>
</div>
<div id="two">
<iframe id="iframe1" name="result"></iframe>
</div>
JS
document.getElementById("functionThis").addEventListener("click", showResult, false);
function showResult() {
var htmlString = "<body>Some Words</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src = "javascript:'" + htmlString + "'";
}
Fiddle
working fiddle
Please tell me how to send div id as a parameter to javascript function onclick in a link of a page to open it via javascript. I want to send div id to open that particular link.
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction()>Ostrig</a>
<script type="text/javascript">
function MyFunction(anchor) {
document.getElementById('achor').click();
}
</script>
Use this way -
function myFunction(x) {
document.getElementById('showId').innerHTML = x.parentElement.id; // x.parentElement.id gets the parent div then its id value
}
<div id="div1">
Click Me <!-- pass this to the function -->
</div>
<br />Div's id: <span id="showId">
</span>
The above code was just for simplicity. For your sample code -
<div id="div1">
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction(this)>Ostrig</a>
</div>
<script type="text/javascript">
function MyFunction(anchor) {
alert(anchor.parentElement.id); // Will return div1
alert(anchor.id); // Will return anchor22
}
</script>
I made a little web-based web browser for a web-based OS I made. I noticed that in some sites, they have links that like to open in new tabs. Is there a way that this can be prevented and have the links open in the iframe instead?
Here's my code for the whole browser just in case:
<html>
<head>
<link href="./browser.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="help">
<form action="help.html"><input type="submit" value="Help"></form>
</div>
Address:
<div id="logo">
<img src="stallion.png">
</div>
<input type="text" style="width: 400px;" name="url" id="url">
<input type="button" value="Go" id="load">
<div>
<input type="image" src="back.png" height=25 width=25 onclick="back()">
<input type="image" src="forward.png" height=25 width=25 onclick="forward()">
<input type="image" src="refresh.png" height=26 width=26 onclick="refresh()">
</div>
<iframe frameborder=0 class="netframe" src="http://www.bing.com/" id="main_frame"></iframe>
</body>
<script>
function back()
{
window.history.back();
}
</script>
<script>
function forward()
{
window.history.forward();
}
</script>
<script>
function refresh()
{
var iframe = document.getElementById('main_frame');
iframe.src = iframe.src;
}
</script>
</html>
There is two choices
1 : You can check all of the html in the iframe on each change and look for "target=_blank" and if so replace with "target=_self"
2 : Which I think would be the better way is, when the user clicks on an anchor tag check to see if the anchor has the attribute "target=_blank" if they do, simply remove it and then click the link.
I have provided a jsFiddle below
https://jsfiddle.net/L5dhp80e/
Html
<a class="newTab" href="http://www.google.com" target="_blank">
New Tab Google
</a>
<br />
<a class="removeBlank" href="http://www.google.com" target="_blank">
Removed Target Blank Google
</a>
Javascript
$(function () {
$('a.removeBlank').on('click', function () {
if ($(this).attr('target') == "_blank") {
$(this).attr('target', '_self');
}
$(this).click();
return false;
})
});
However if the iframe content is cross domain I don't think you can edit any of the code at all.
Get DOM content of cross-domain iframe
I found this answer in the web:
window.open = function (url, name, features, replace) {
document.getElementById('#iframe').src = url;
}
or with jQuery:
window.open = function (url, name, features, replace) {
$('#iframe').attr('src', url);
}
I haven't already tested it, but i hope it works.
Add target="_self"
<iframe src="http://google.com" target="_self"></iframe>
Target Attributes are:
_self = Opens the linked document in the same frame as it was clicked (this is default)
_blank = Opens the linked document in a new window or tab
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window
framename = Opens the linked document in a named frame
Information from:
http://www.w3schools.com/tags/att_a_target.asp
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>
When I click the hyperlink the child.onload function does not get called in IE8. I don't know why but works in other browsers.
Also there are no syntax errors. This snippet I've pasted from the html file.
Also if I assign the child form fields using setTimeout 5 sec etc then it's working in IE8.
JavaScript:
<script type="text/javascript">
function openWindow(){
var child=window.open("index.php?option=com_aicontactsafe&pf=4&tmpl=component",'win2','width=400,height=350,menubar=yes,resizable=yes');
if(child!==null) {
child.onload=function() {
alert("In onload");
child.document.getElementById("aics_ForDocument_Title").value=window.document.getElementById("documentname").innerHTML;
child.document.getElementById("aics_FormURL").value="$referer";
child.document.getElementById("aics_FormURL").readOnly=true;
};
}
return false;
}
</script>
HTML:
<div id="reportthis">
<a href="#" onclick=" openWindow();">
<img src="images/instruments/reportthis.jpg" width="110" height="31" alt="Report This" title="Report this document for any issues" />
</a>
</div>