Jak edytować tytuł pola alertów JavaScript?

168

Generuję alert JavaScript z następującym kodem na stronie C # .NET:

Response.Write("<script language=JavaScript> alert('Hi select a valid date'); </script>");

Wyświetla okno alertu z tytułem nagłówka „Wiadomość ze strony internetowej”.

Czy można zmodyfikować tytuł?

javascript alert subash
źródło

Myślę, że pytanie dotyczyło JavaScript, który jest kompatybilny ze wszystkimi platformami i przeglądarkami, a nie VBScript, który jest ściśle związany z IE i Windows, więc jego użycie jest ograniczone tylko do Windows

UserTursty

2

możliwy duplikat zmiany tytułu ostrzeżenia Javascript

Sjoerd

2

Czy wiesz, że alerty mogą być bardzo łatwo wyłączone przez użytkownika? NIE powinieneś na nich polegać!

toesslab

259

Nie, nie możesz.

To funkcja bezpieczeństwa / ochrony przed phishingiem.

Pierreten
źródło

22

Chociaż jest to odpowiedź i faktycznie jest prawdą, ustaliłem, że możesz stworzyć własną wersję alertu i zrobi to, co chcesz. Prosty modalny i przesłaniający wywołanie funkcji alert.

Fallenreaper,

1

W jaki sposób jest to funkcja zabezpieczająca / antyphishingowa? Jestem ciekawy, nie kłócę się.

Tim

1

@Tim Przypuszczalnie byłoby łatwiej zasymulować inną witrynę internetową, gdyby Twoje alerty nie informowały użytkownika, z jakiego adresu URL pochodzą; odrzucenie tego dostosowania zmusza JavaScript do poinformowania użytkownika, że nie jest to uzasadniona wiadomość.

Hydrotermalny

@Hydrothermal Tak z ciekawości, czy CSS nie może teraz symulować zachowania alertów, a jeśli tak, to czy zmiana tytułów alertów modalnych nadal stanowi duże zagrożenie?

Josh

6

@Josh Możesz podejść blisko, wykonując dużo ciężkiej pracy, ale natywne alerty przeglądarki mają zachowanie, którego nie można zasymulować, takie jak zamrażanie reszty przeglądarki, unoszenie się nad interfejsem przeglądarki i działanie jako osobne okno, które można przeciągnąć poza ekran przeglądarki. Bardzo trudno jest stworzyć przekonującą replikę, zwłaszcza że alert każdej przeglądarki wygląda inaczej.

Hydrotermalne

65

Nie, to niemożliwe. Możesz użyć niestandardowego pola ostrzegawczego javascript.

Znalazłem fajny przy użyciu jQuery

Okna dialogowe alertów jQuery (ostrzeżenie, potwierdzenie i monit o zastąpienie)

rahul
źródło

4

Dziękuję, ale nie jestem zainteresowany używaniem niestandardowego okna alertów

subash

20

Nawiasem mówiąc, nie możesz zmienić tytułu, aby zapobiec oszukaniu użytkownika przez złośliwe witryny internetowe, aby pomyślał, że alert pochodzi z ich systemu operacyjnego lub z czegoś innego.

benzado

1

UWAGA: Inny użytkownik próbował edytować tę odpowiedź, aby wskazać, że podane łącze prowadzi do witryny, w której wykryto złośliwe oprogramowanie.

Bez obrazy, ale te alerty wyglądają bardzo brzydko. SweetAlert jest o wiele ładniejszy niż ten.

shashwat

32

Możesz to zrobić w IE:

<script language="VBScript">
Sub myAlert(title, content)
      MsgBox content, 0, title
End Sub
</script>

<script type="text/javascript">
myAlert("My custom title", "Some content");
</script>

(Chociaż naprawdę żałuję, że nie możesz.)

Chris Fulstow
źródło

53

Wszyscy życzymy tego samego

rahul

@Chris Fulstow, co może być rozwiązaniem tego pytania

Tom

1

Uwielbiam vbscript, chciałbym, żeby vbscript był znormalizowany wraz z javascript. w ten sposób mogę pisać bez zamieszania związanego z rozróżnianiem wielkości liter, a wszystkie popularne przeglądarki będą posłuszne moim poleceniom MWHAHAHA

Ronnie Matthews

3

Wow komentarz ma więcej głosów niż odpowiedź ... za oddelegowanie części odpowiedzi

Marvin Thobejane

11

Zastąp funkcję window.alert () javascript.

window.alert = function(title, message){
    var myElementToShow = document.getElementById("someElementId");
    myElementToShow.innerHTML = title + "</br>" + message; 
}

Dzięki temu możesz stworzyć własną alert()funkcję. Utwórz nowe, fajnie wyglądające okno dialogowe (z niektórych elementów div).

Przetestowano działanie w Chrome i Webkicie, nie jestem pewien innych.

Derk Jochems
źródło

1

co jest someElementId? który tag mam na myśli?

Pramod Setlur

1

someElementIdjest jakimkolwiek identyfikatorem, na jaki ustawiłeś swój element HTML.

James P.,

11

Znalazłem ten Sweetalert w celu dostosowania javascript pola nagłówka.

Na przykład

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

Abed Putra
źródło

1

Tak. SweeAlert jest jeszcze prostszy niż twój przykład, jeśli chcesz. Właśnie utworzyłem <link do skryptu do ich biblioteki i zastąpiłem słowo „alert” w moim kodzie i to było! Dziękuję Ci. Słodka rekomendacja!

JustJohn

5

Aby odpowiedzieć na pytania dotyczące tego, jak to zadałeś.

To jest naprawdę NAPRAWDĘ łatwe (przynajmniej w Internet Explorerze), zrobiłem to w około 17,5 sekundy.

Jeśli używasz niestandardowego skryptu dostarczonego przez cxfx: (umieść go w swoim pliku apsx)

<script language="VBScript">
Sub myAlert(title, content)
MsgBox content, 0, title 
End Sub 
</script>

Możesz wtedy nazwać to tak samo, jak nazwałeś zwykły alert. Po prostu zmodyfikuj swój kod do następującego.

Response.Write("<script language=JavaScript> myAlert('Message Header Here','Hi select a valid date'); </script>");

Mam nadzieję, że to pomoże tobie lub komuś innemu!

kralco626
źródło

2

Działa dla mnie z IE, ale nie Firefox. Dzięki tak samo, szybko i nieprzyjemnie, ale może się przydać.

Darth Continent

1

@ Darth. Yo I proly powinienem o tym wspomnieć. Używa VBScript. musisz wygooglować, jak uruchomić VBScript w przeglądarce Firefox.

kralco626

2

@ Dath - PS Nie wiem, czy istnieje sposób na uruchomienie VBScript w przeglądarce Firefox. Stworzyłbym inny temat o nazwie coś w rodzaju, jak uruchomić ten skrypt vb w przeglądarce Firefox i opublikował kod, który ci podałem powyżej, i zobaczył, czy ktoś może coś wymyślić.

kralco626

2

@Darth - Chociaż użyłbym rozwiązania Rahula. Po prostu użyj JQuery, to naprawdę proste!

kralco626

3

Dwa głosy „przeciw”, jedno „za”… ale nie ma komentarzy na temat powodów, dla których jestem odrzucany… Myślę, że jest to poprawne rozwiązanie… przynajmniej w IE…: /

kralco626

4

Jest tutaj całkiem niezły `` hack '' - https://stackoverflow.com/a/14565029 gdzie używasz iframe z pustym src do wygenerowania komunikatu ostrzegawczego / potwierdzenia - nie działa na Androidzie (ze względów bezpieczeństwa) - ale może pasować do twojego scenariusza.

extraLRG
źródło

2

Możesz dokonać niewielkiej korekty, aby zostawić pustą linię u góry.

Lubię to.

        <script type="text/javascript" >
            alert("USER NOTICE "  +"\n"
            +"\n"
            +"New users are not allowed to work " +"\n"
            +"with that feature.");
        </script>

webzy
źródło

1

Tak, możesz to zmienić. jeśli wywołasz funkcję VBscript w JavaScript.

Oto prosty przykład

<script>

function alert_confirm(){

      customMsgBox("This is my title","how are you?",64,0,0,0);
}

</script>


<script language="VBScript">

Function customMsgBox(tit,mess,icon,buts,defs,mode)
   butVal = icon + buts + defs + mode
   customMsgBox= MsgBox(mess,butVal,tit)
End Function

</script>

<html>

<body>
<a href="javascript:alert_confirm()">Alert</a>
</body>

</html>

Saeed
źródło

1

@ManikandanSethuraju nie będzie działać na FF i GC, ponieważ nie obsługują VBScript.

atsurti

1

Kiedy zaczynasz lub po prostu dołączasz do projektu opartego na aplikacjach internetowych, projekt interfejsu może być dobry. W przeciwnym razie należy to zmienić. W aplikacjach Web 2.0 będziesz pracować z dynamiczną zawartością, wieloma efektami i innymi rzeczami. Wszystkie te rzeczy są w porządku, ale nikt nie pomyślał o stylizowaniu okien alertów JavaScript i potwierdzeń. Oto sposób, w jaki… całkowicie dynamiczny, oparty na JS i CSS Stwórz prosty plik html

<html>
 <head>
   <title>jsConfirmSyle</title>
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript" src="jsConfirmStyle.js"></script>
    <script type="text/javascript">

      function confirmation() {
       var answer = confirm("Wanna visit google?")
       if (answer){
       window.location = "http://www.google.com/";
       }
     }    

    </script>
    <style type="text/css">
     body {
      background-color: white;
      font-family: sans-serif;
      }
    #jsconfirm {
      border-color: #c0c0c0;
      border-width: 2px 4px 4px 2px;
      left: 0;
     margin: 0;
     padding: 0;
     position: absolute;
    top: -1000px;
    z-index: 100;
   }

  #jsconfirm table {
   background-color: #fff;
   border: 2px groove #c0c0c0;
   height: 150px;
   width: 300px;
  }

   #jsconfirmtitle {
  background-color: #B0B0B0;
  font-weight: bold;
  height: 20px;
  text-align: center;
}

 #jsconfirmbuttons {
height: 50px;
text-align: center;
 }

#jsconfirmbuttons input {
background-color: #E9E9CF;
color: #000000;
font-weight: bold;
width: 125px;
height: 33px;
padding-left: 20px;
}

#jsconfirmleft{
background-image: url(left.png);
}

#jsconfirmright{
background-image: url(right.png);
 }
 < /style>
  </head>
 <body>
<p><br />
<a href="#"
onclick="javascript:showConfirm('Please confirm','Are you really really sure to visit    google?','Yes','http://www.google.com','No','#')">JsConfirmStyled</a></p>
<p><a href="#" onclick="confirmation()">standard</a></p>

</body>
</html>

Następnie utwórz prostą nazwę pliku js jsConfirmStyle.js. Oto prosty kod js

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

 xConfirmStart=800;
 yConfirmStart=100;

  if(ie5||nn6) {
  if(ie5) cs=2,th=30;
  else cs=0,th=20;
   document.write(
    "<div id='jsconfirm'>"+
        "<table>"+
            "<tr><td id='jsconfirmtitle'></td></tr>"+
            "<tr><td id='jsconfirmcontent'></td></tr>"+
            "<tr><td id='jsconfirmbuttons'>"+
                "<input id='jsconfirmleft' type='button' value='' onclick='leftJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
                "&nbsp;&nbsp;"+
                "<input id='jsconfirmright' type='button' value='' onclick='rightJsConfirm()' onfocus='if(this.blur)this.blur()'>"+
            "</td></tr>"+
        "</table>"+
    "</div>"
  );
   }

 document.write("<div id='jsconfirmfade'></div>");


 function leftJsConfirm() {
  document.getElementById('jsconfirm').style.top=-1000;
  document.location.href=leftJsConfirmUri;
 }
function rightJsConfirm() {
document.getElementById('jsconfirm').style.top=-1000;
document.location.href=rightJsConfirmUri;
 }
function confirmAlternative() {
if(confirm("Scipt requieres a better browser!"))       document.location.href="http://www.mozilla.org";
}

leftJsConfirmUri = '';
rightJsConfirmUri = '';

  /**
   * Show the message/confirm box
  */
    function       showConfirm(confirmtitle,confirmcontent,confirmlefttext,confirmlefturi,confirmrighttext,con      firmrighturi)  {
document.getElementById("jsconfirmtitle").innerHTML=confirmtitle;
document.getElementById("jsconfirmcontent").innerHTML=confirmcontent;
document.getElementById("jsconfirmleft").value=confirmlefttext;
document.getElementById("jsconfirmright").value=confirmrighttext;
leftJsConfirmUri=confirmlefturi;
rightJsConfirmUri=confirmrighturi;
xConfirm=xConfirmStart, yConfirm=yConfirmStart;
if(ie5) {
    document.getElementById("jsconfirm").style.left='25%';
    document.getElementById("jsconfirm").style.top='35%';
}
else if(nn6) {
    document.getElementById("jsconfirm").style.top='25%';
    document.getElementById("jsconfirm").style.left='35%';
}
else confirmAlternative();

}

Możesz pobrać pełny kod źródłowy stąd

Shafiqul Islam
źródło

1

czy możesz zrobić demu plz

X-Coder

0

Miałem podobny problem, gdy chciałem zmienić tytuł pola i tytuł przycisku domyślnego pola potwierdzenia. Wybrałem wtyczkę dialogową Jquery Ui http://jqueryui.com/dialog/#modal-confirmation

Kiedy miałem:

function testConfirm() {
  if (confirm("Are you sure you want to delete?")) {
    //some stuff
  }
}

Zmieniłem to na:

function testConfirm() {

  var $dialog = $('<div></div>')
    .html("Are you sure you want to delete?")
    .dialog({
      resizable: false,
      title: "Confirm Deletion",
      modal: true,
      buttons: {
        Cancel: function() {
          $(this).dialog("close");
        },
        "Delete": function() {
          //some stuff
          $(this).dialog("close");
        }
      }
    });

  $dialog.dialog('open');
}

Można zobaczyć, jak pracuje tutaj https://jsfiddle.net/5aua4wss/2/

Mam nadzieję, że to pomoże.

tylko ja
źródło

Jak edytować tytuł pola alertów JavaScript?

Odpowiedzi: