Does the HTML nodes in <iframe> support javascript in design mode? For the following code, dialog doesn't pop up when I click the <span>. My browser is FF 16.0.2. Is there any way to get an alert when clicking the span?
<html>
<body >
<iframe id="myeditor" style="width:500px; height:170px;"></iframe><br><br>
<script type="text/javascript">
editor = document.getElementById("myeditor").contentWindow;
editor.document.designMode="on";
editor.document.open();
editor.document.write('head <span onclick="alert(1)" style="border: solid 1px #666">click me</span> tail');
editor.document.close();
</script>
</body>
</html>
Thanks for reading here. :D
Event Handling Disabled
A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla 1.5) the events become active again.
From MDN.
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
I'm trying to write my first chrome extension to test my acquired knowledge from codecademy (HTML/CSS, JQUERY and Javascript). First of all I'm trying to append text to a paragraph tag via the onclick of a button.
heres my code:
<!doctype html>
<html>
<head>
<title>Facebook event graph</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="popup.js"> </script>
</head>
<body>
<form id="inputUrl">
Enter a URL: <input type="text" name="url" id="url">
<button type="button" onclick="getFacebookData()"> Get Data </button>
</form>
<canvas id="graph" width="300" height="100">
</canvas>
<p id="text" width="300" height="100">1</p>
</body>
</html>
and my popup.js:
$(document).ready(function(){
//Variables
function getFacebookData() {
$('p').append('Test');
};
});
it's probably something very basic that I'm doing wrong, but a push in the right direction would be really appreciated :)
You are not allowed to use inline scripting like onclick="getFacebookData()"
You have to remove the handler from html:
<button type="button" id="my-button"> Get Data </button>
And you have to move the handler into popup.js:
$(document).ready(function(){
$('#my-button').click(getFacebookData);
});
You are also, by default, not allowed to load jQuery from an external CDN - and certainly not http one, again for Content Security Policy reasons. And you shouldn't! Put jQuery in your extension's folder and load it locally.
Matter of taste, but I would place getFacebookData() definition outside $(document).ready, so it's available in the global scope. Also, the semicolon after it is not needed.
Last, but not least: for future debugging, inspect the console of the corresponding page of your extension. For things like background/options page you should be able to access them from Developer Mode extensions list. For a popup, you should right-click the button of your extension and select "Inspect Popup".
i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!
In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.
I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');
This should put you on the right tracks.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.
use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.
I have a dropdown Menu where in a div is clicked and List is shown.
On focus out I am supposed to hide the list(i.e. when the user clicks or focuses on some other element and not on mouse out). Hence my obvious choice was onblur.
Now the JavaScript seems to work in Firefox but not in IE thats because my div has a sub div with a height and width specified. This is reproducible in a test file. I am using jQuery.
Is this a known issues in Internet Explorer? And what is the work around?
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option div {height:18px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
<div class="selected_option" tabindex="0">
<div>anywhere in the page</div>
</div>
</body>
</html>
The IE-proprietary focusout event worked for me:
$('.selected_option').bind('focusout', function(){
alert('focusout');
});
Again, this is proprietary (see quirksmode) but may be appropriate if it solves your problem. You could always bind to both the blur and focusout events.
onkeypress="this.blur(); return false;"
its works fine on all IE versions
First realize that focus and blur events are only supported on focusable elements. To make your <div>s focusable you need to look at the tabindex property.
Try using an anchor tag instead of a div since these are naively focusable. You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. Something like this:
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option
{
display: block;
height:18px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
anywhere in the page
</body>
</html>
Haven't tested this, but I think it should work.
I have set the tabIndex property for the div to be focusable and moreover if i comment the height the blur event is fired so I assume thats not the problem.
Try:
$('.selected_option').bind('blur', function(){
alert('blurred');
});
Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously).
I am opening a window as a modal.
window.showModalDialog("http://www.google.com","","dialogWidth:500px;dialogHeight:500px")
as I set height, what are other options available?
Like option buttons, menus etc. where I can find tutorials?
EDIT
It works in Mozilla firefox, but people are saying it doesn't!
My code is
Please somebody Edit my sample code for display purpose
<html>
<head>
<script>
function abc() {
window.showModalDialog("3.htm", "", "dialogWidth:500px;dialogHeight:500px");
}
</script>
</head>
<body>
<input type="button" id="check" name="check" onclick="abc()" value="open"/>
</body>
</html>
Second EDIT
code for page 3.htm
<html>
<head>
<script>
function abc(){
close()
}
</script>
</head>
<body>
<input type="button" id="check" name="check" onclick="abc()" value="close"/>
</body>
</html>
Check out both code on fire fox! and tell me.
Third EDIT
Ok It's not working in corme and opera
Be aware that showModalDialog is IE specific and won't necessarily work with other browsers. If you want cross browser modal dialogs you need to use a div to hide the rest of the page and overlay your dialog on top. It is easier to use an existing javascript library that already takes care of this.
I suggest not to use popups in web apps. Use floating divs instead which looks like a modal dialog but are better than the popups.
JQuery UI has a decent popup/modal dialog API and I've worked with the Boxy plugin which is very easy to implement.
They're cross browser and simple to use.
To load a page using boxy use:
var boxyPopup;
Boxy.load("aPage.html",
{title: "Title",
modal: true,
fixed: false,
afterShow: function(){
boxyPopup = this;}});
I'm not sure what you mean by it not opening a new page on same boxy window but using the above you have the boxyPopup var as a reference to the open boxy object and can access/change contents using that.