confirm（）如何在JavaScript中工作 [英] How does confirm() work in JavaScript
问题描述
我正在考虑JavaScript中的本地函数如何在今天工作，并且我可以跨 alert（），并且我认为它必须使用 createElement ）或者创建一个元素并使用 innerHTML ，但我无法弄清楚创建一个popup元素需要的完整代码，两个按钮，然后根据一次点击返回 true 或 false 。
jowes说：
通常JS是异步的;为什么警报特别？如何以及为什么它会以与我自己的脚本不同的方式创建UI元素？
以下是我计算出的代码：
function confirm（message）{
message = message.replace（/\\\
/ g，< br />）
createElement（）;
//创建元素非常复杂，无法创建包含消息的文本框。 。 。
//这两个函数与按钮的onclick关联。
函数clickOkay（）{
valueToReturn = true
return true;
}
函数clickCancel（）{
valueToReturn = true
return false;
}
//在这里，用户点击按钮，并设置valueToReturn
返回valueToReturn;
}
但是我不明白它如何阻止后台脚本，或者createElement（）如何工作，（但这是另一个问题）
不是使用javascript创建的。然而，如果你想重现这种行为，你可以采用类似于此的方式：
.myConfirm {position：fixed;宽度：100％;高度：100％;背景：rgba（0,0,0,0.05）;}。myConfirm> div {width：200px;保证金：10％汽车; padding：10px 20px;边框：1px纯黑色;背景：#ccc;}。myConfirm div p {text-align：center;}。myConfirm div button {width：40％; margin：0 5％;}
这可能是一个实现一个自制的警告框。
注意本地警报是同步功能。这意味着浏览器会停止JavasScript-engine，直到警报框关闭。你不能克隆那个行为，但是至少你可以给这个函数一个被调用的回调函数，当其中一个按钮被点击时。在这种情况下，回调会将值记录到控制台。
希望我可以在这里帮忙！
UPDATE 更新后的问题 我非常确定今天（在FF中）警报是通过浏览器实习html和CSS呈现的。 I was thinking about how the native functions in JavaScript work today, and I can across usually JS is async; why is alert special? how and why does it create UI elements in a different way from my own scripts? Here's the code I have figured out: But I don't understand how it stops the background script, if accessable, or how createElement() works, (but thats a question for another time) The
This could be an implementation for a self-made alert-box. Hope I could help here! UPDATE to the updated question I am pretty sure that today (in FF) the alert is rendered with browser-intern html and CSS, too. 这篇关于confirm（）如何在JavaScript中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
回到JavaScript是新的时代确认是向用户询问具体的价值。 确认，提示和警报是这些日子的特殊功能它们的行为与普通函数完全不同，因为它们会破坏JavaScript-流程。
当你问为什么：那么 - 也许这是一个很好的功能回来在这些日子里。请注意，在早期版本中， alert 看起来像系统消息（在IE中它仍然存在）。至少在Firefox中，即使警报被调用，您现在也可以正常地与浏览器进行交互。
这就是为什么它现在仅用于调试（甚至在这里 console.log 是更好的选择）。
alert() and I figured it must use createElement() or make an element and use innerHTML, but I can't figure out the complete code it would need to create a popup element, and make two buttons, then return true or false based on the one click.
jowes said:
function confirm(message) {
message = message.replace(/"\n"/g, "<br />")
createElement();
//The create Element is very complicated to create the text box including message. . .
//These two functions are tied to the button's onclick's.
function clickOkay() {
valueToReturn = true
return true;
}
function clickCancel() {
valueToReturn = true
return false;
}
//here, the user hits the button, and sets valueToReturn
return valueToReturn;
}
confirm()-function is a native function brought to you by every browser.
It is not created by using javascript. However if you want to reproduce that behaviour you go a way similar to this:function myConfirm(text, cb){
// We need this later
var body = document.getElementsByTagName('body')[0];
// First we create a div which holds the alert and give it a class to style it with css
var overlay = document.createElement('div');
overlay.className = 'myConfirm';
// The box holds the content
var box = document.createElement('div');
var p = document.createElement('p');
p.appendChild(document.createTextNode(text));
// We append the text to the div
box.appendChild(p);
// Create yes and no button
var yesButton = document.createElement('button');
var noButton = document.createElement('button');
// Add text and events to the buttons
yesButton.appendChild(document.createTextNode('Yes'));
yesButton.addEventListener('click', function(){ cb(true); body.removeChild(overlay); }, false);
noButton.appendChild(document.createTextNode('No'));
noButton.addEventListener('click', function(){ cb(false); body.removeChild(overlay); }, false);
// Append the buttons to the box
box.appendChild(yesButton);
box.appendChild(noButton);
// Append the box to the Overlay
overlay.appendChild(box)
// insert the Overlay with box into the dom
body.appendChild(overlay);
}
myConfirm('Hello there!', function(value){ console.log(value); });.myConfirm{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.05);
}
.myConfirm>div{
width:200px;
margin:10% auto;
padding:10px 20px;
border:1px solid black;
background:#ccc;
}
.myConfirm div p{
text-align:center;
}
.myConfirm div button{
width:40%;
margin:0 5%;
}
Note that the native alert is a synchronous-function. That means the browser stops the JavasScript-engine until the alert-box is closed. You cant clone that behavior but at least you can give the function a callback which is called, when one of the buttons is clicked. In this case the callback just logs the value to the console.
Back in the days when JavaScript was new confirm was a valid way to ask the user for a specific value. confirm, prompt and alert are special functions from these days which behave completely different than normal functions since they break the JavaScript-"flow".
When you ask why: Well - maybe it was a nice to have-feature back in these days. Note that in earlier versions alert looked like a system-message (in IE it still does). At least in Firefox you can nowadays interact normally with your browser even if alert is called.
That's why it is merely used for debugging only today (and even here console.log is the better choice).
