javascript - JS 在 iOS 设备上无法正常工作 - 仅有时

标签 javascript css ios

I have searched here for weeks now trying to find an answer. I haven't seen anything that duplicated my problem, but I have tried a few things anyway, either because they were close, or out of desperation. So, here I am asking specifically.



我的网站上有一个成员(member)区，为玩家提供一个记事本来记笔记。这是一件简单的事情，只是一个使用 JS 显示或隐藏弹出窗口的 PHP 写入平面文件。在每个测试的设备上，屏幕尺寸、分辨率、操作系统等都可以完美运行。

我在游戏区的侧边栏上有相同的代码和弹出窗口。在所有 Linux 和 Windows 操作系统、浏览器、移动或桌面屏幕上，它都能完美运行，但在 iPhone、iPad 和 Mac 电脑上，Safari 仍然存在弹出窗口(已验证，玩家可以单击链接、编写和保存笔记等)，但不会出现弹出窗口。它们只是……看不见。

我不是 JS 专家，也不是 PHP 方面的专家，但我觉得我只是在这里遗漏了一些显而易见的东西。

我希望有人能看到我错过了什么。同样，此代码按预期的页面 A 工作，但不是页面 B，即使它是相同的代码。 iOS 设备中的弹出窗口在页面 B 上，只是不可见。

// Notepad PopUp
var note = document.getElementById('myNote');
var btn = document.getElementById("noteBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  note.style.display = "block";
}

span.onclick = function() {
  note.style.display = "none";
}

// Help Links PopUp
var links = document.getElementById('myLinks');
var btn = document.getElementById("linksBtn");
var span = document.getElementsByClassName("close2")[0];
btn.onclick = function() {
  links.style.display = "block";
}

span.onclick = function() {
  links.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == links) {
    links.style.display = "none";
  }
}
.note, .links, .donate {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 40px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
}

.note-content, .links-content, .donate-content {
	position: relative;
	background-color: #888;
	margin: auto;
	padding: 0;
	width: 25em;
	height: 30em;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}
/* Don't forget the drop down animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}
/* and the close buttons, if applicable */
.close, .close2, .close3 {
	color: #FFF;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover, .close:focus, .close2:hover, .close2:focus, .close3:hover, .close3:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
/* Next we need the header, body, content and footers */
.note-header, .links-header, .donate-header {
	min-height: 4em;
	padding: 2px 16px;
	background-color: #999;
	color: #000;
	position: relative;
}

.note-header p, .links-header p, .donate-header p {
	color: #000;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.note-body, .links-body, .donate-body {
	padding-top: 1em;
}

.note-body p, .donate-body p {
	padding-top: 1em;
}

.links-body p {
	padding-top: 1em;
	font-size: 1.25em;
	margin: 0.5em auto;
}

.links-body a:link, .links-body a:visited, .donate-body a:link, .donate-body a:visited {
	color: #2D5986;
	background: inherit;
}

.links-body a:hover, .donate-body a:hover {
	color: #0099CC;
	background: inherit;
	text-decoration: underline;
}

textarea {
	font-family: "Courier New", Georgia;
}
 
.info {
	font-size: 8pt;
	font-style: italic;
}
<div class="topbar">
				<div class="topRight">
					<ul>
						<li><button id="forumBtn" class="curs">Member Forum</button></li>
						<li><button id="memberBtn" class="curs">Member Portal</button></li>
						<li><button id="noteBtn" class="curs">Open Notepad</button></li>
						<li><button id="linksBtn" class="curs">Open Help Tools</button></li>
						<li><button id="donateBtn" class="curs">Donate </button></li>
					</ul>
				</div>
	<div id="myNote" class="note">
		<div class="note-content">
			<div class="note-header">
			  <span class="close">&times;</span>
			  <p>Member's Notepad</p>
			</div>
			<div class="note-body">
			  <p><form action="/pge.php" method="POST" name="note">
									<textarea name="note" rows="20" cols="40">Hi! I'm a notepad!
</textarea>
									<input type="submit" name="submit" value="Save Note">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="delNote" value="Delete Note" onclick="return confirm('Are you sure you want to do that?');"></form>
				</p>
			</div>
	  </div>
	</div>
	<div id="myLinks" class="links">
		<div class="links-content">
			<div class="links-header">
			  <span class="close2">&times;</span>
			  <p>Help Tools: Links and Resources</p>
			</div>
			<div class="links-body">
			  <p><a href="http://example.com/Tools/" target="_blank">Tools</a></p>
			  <p><a href="http://example.com/tools/" target="_blank">more Tools</a></p>
			  <p><a href="https://example.com/" target="_blank"> Converter</a></p>
			  <p><a href="http://google.com/" target="_blank">Google Search</a></p>
			  <p><a href="https://www.ecosia.org/" target="_blank">Ecosia Search</a></p>
			</div>
		</div>
	</div>
	<div id="myDon" class="donate">
		<div class="donate-content">
			<div class="donate-header">
			  <span class="close3">&times;</span>
			  <p>Ways to Help CWoT 2</p>
			</div>
			<div class="donate-body">
			  <p><a target="_blank" href="https://example.com">Donate</a><br><span class="info">a $3 (USD) donation</span></p>
			</div>
		</div>
	</div>
</div><script src="../scripts/notepad.js"></script>

最佳答案

  • 永远不要在表单中调用任何东西。如果您想以编程方式提交它，提交事件处理程序对您不可用
  • 您重新定义 btn - 它始终是第二个按钮 - 这是一个真正的错误。
  • 我强烈建议使用 querySelector 和 addEventListener
  • 问题可能是相关页面上的 CSS 问题

    • 在 OSX 10.15.3 Catalina 上的 Safari 13.0.5 (15608.5.11) 中测试

    图片

    enter image description here

    enter image description here

    代码将如下所示:

    // Notepad PopUp
var note = document.getElementById('myNote');
var noteBtn = document.getElementById("noteBtn");
var closeNote = document.querySelector(".close");
noteBtn.addEventListener("click", function() {
  note.style.display = "block";
});
closeNote.addEventListener("click", function() {
  note.style.display = "none";
});

// Help Links PopUp
var links = document.getElementById('myLinks');
var linksBtn = document.getElementById("linksBtn");
var closeLinks = document.querySelector(".close2");
linksBtn.addEventListener("click", function() {
  links.style.display = "block";
});

closeLinks.addEventListener("click", function() {
  links.style.display = "none";
});

window.addEventListener("click",  function(event) {
  if (event.target == links) {
    links.style.display = "none";
  }
});

document.querySelector("[name=delNote]").addEventListener("click",function(e) {
  if (!confirm('Are you sure you want to do that?')) e.preventDefault();
  })
    .note,
.links,
.donate {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 40px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
}

.note-content,
.links-content,
.donate-content {
  position: relative;
  background-color: #888;
  margin: auto;
  padding: 0;
  width: 25em;
  height: 30em;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Don't forget the drop down animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}


/* and the close buttons, if applicable */

.close,
.close2,
.close3 {
  color: #FFF;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus,
.close3:hover,
.close3:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


/* Next we need the header, body, content and footers */

.note-header,
.links-header,
.donate-header {
  min-height: 4em;
  padding: 2px 16px;
  background-color: #999;
  color: #000;
  position: relative;
}

.note-header p,
.links-header p,
.donate-header p {
  color: #000;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.note-body,
.links-body,
.donate-body {
  padding-top: 1em;
}

.note-body p,
.donate-body p {
  padding-top: 1em;
}

.links-body p {
  padding-top: 1em;
  font-size: 1.25em;
  margin: 0.5em auto;
}

.links-body a:link,
.links-body a:visited,
.donate-body a:link,
.donate-body a:visited {
  color: #2D5986;
  background: inherit;
}

.links-body a:hover,
.donate-body a:hover {
  color: #0099CC;
  background: inherit;
  text-decoration: underline;
}

textarea {
  font-family: "Courier New", Georgia;
}

.info {
  font-size: 8pt;
  font-style: italic;
}
    <div class="topbar">
  <div class="topRight">
    <ul>
      <li><button id="forumBtn" class="curs">Member Forum</button></li>
      <li><button id="memberBtn" class="curs">Member Portal</button></li>
      <li><button id="noteBtn" class="curs">Open Notepad</button></li>
      <li><button id="linksBtn" class="curs">Open Help Tools</button></li>
      <li><button id="donateBtn" class="curs">Donate </button></li>
    </ul>
  </div>
  <div id="myNote" class="note">
    <div class="note-content">
      <div class="note-header">
        <span class="close">&times;</span>
        <p>Member's Notepad</p>
      </div>
      <div class="note-body">
        <p>
          <form action="/pge.php" method="POST" name="note">
            <textarea name="note" rows="20" cols="40">Hi! I'm a notepad!
</textarea>
            <input type="submit" name="subBut" value="Save Note">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="delNote" value="Delete Note" /></form>
        </p>
      </div>
    </div>
  </div>
  <div id="myLinks" class="links">
    <div class="links-content">
      <div class="links-header">
        <span class="close2">&times;</span>
        <p>Help Tools: Links and Resources</p>
      </div>
      <div class="links-body">
        <p><a href="http://example.com/Tools/" target="_blank">Tools</a></p>
        <p><a href="http://example.com/tools/" target="_blank">more Tools</a></p>
        <p><a href="https://example.com/" target="_blank"> Converter</a></p>
        <p><a href="http://google.com/" target="_blank">Google Search</a></p>
        <p><a href="https://www.ecosia.org/" target="_blank">Ecosia Search</a></p>
      </div>
    </div>
  </div>
  <div id="myDon" class="donate">
    <div class="donate-content">
      <div class="donate-header">
        <span class="close3">&times;</span>
        <p>Ways to Help CWoT 2</p>
      </div>
      <div class="donate-body">
        <p><a target="_blank" href="https://example.com">Donate</a><br><span class="info">a $3 (USD) donation</span></p>
      </div>
    </div>
  </div>
</div>
<script src="../scripts/notepad.js"></script>

    关于javascript - JS 在 iOS 设备上无法正常工作 - 仅有时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60681257/

    上一篇：ios - 静默警告“无法为[symbol]创建紧凑展开:堆栈subl指令与侏儒堆栈大小太大不同”

    下一篇：ios - VoiceOver 是否总是忽略宽度和高度为零的 iOS View ？

    相关文章：

    javascript - 让一个 div 在鼠标悬停在另一个 div 上时淡出

    ios - 适用于 iOS 的类似 Tinder 的滑动动画

    ios - 检测在 UIScrollView 中点击 UIImageView

    ios - 带有导航 Controller 的不同页面上的 Xamarin.SideBar

    javascript - 如何将 getElementsByName 返回的元素值与字符串进行比较？

    javascript - JQuery/Javascript 淡入滚动不工作

    css - Bootstrap 2模态动画延迟

    css - 在 CSS 中定位 Picture 元素时，我们应该使用 img 还是图片选择器？

    javascript - jQuery附加不包含子元素的div

    javascript - JavaScript 中最可靠的字符串分割字符

    ©2024 IT工具网  联系我们