时间戳

首页 > 解决方案 > JS 在 iOS 设备上无法正常工作 - 仅有时

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

问题描述

我已经在这里搜索了几个星期，现在试图找到答案。我没有看到任何重复我的问题的东西，但我还是尝试了一些东西，要么是因为它们很接近，要么是出于绝望。所以，我在这里专门问。

我的网站上有一个会员区，为玩家提供一个记事本来记笔记。这是一件简单的事情，只是一个使用 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>

标签： javascriptcssios

解决方案

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

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

图片

在此处输入图像描述

在此处输入图像描述

代码将如下所示：

// 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>

推荐阅读