Question

我有一个隐藏的div。 div包含由react组件读取和解析的json数据。问题出在iOS上，Safari会像这样不断更改电话号码的值。

原文：

//Fake view model
public class CalendarEventViewModel
{
    public int EventId { get; set; }

    public string Title { get; set; }

    public DateTime? StartDateTimeUtc { get; set; }

    public DateTime? EndDateTimeUtc { get; set; }

    public string Summary { get; set; }

    public bool IsApproved { get; set; }

    public string TimeZoneId { get; set; }
}


public interface IMapper<in TIn, out TOut>
{
        TOut Map(TIn model);
}

public class CalendarEventViewModelMapper : IMapper<CalendarEvent, CalendarEventViewModel>
{
    public CalendarEventViewModel Map(CalendarEvent model)
    {
        return new CalendarEventViewModel
        {
            EndDateTimeUtc = model.EndDateTimeUtc,
            EventId = model.EventId,
            IsApproved = model.IsApproved,
            StartDateTimeUtc = model.StartDateTimeUtc,
            Summary = model.Summary,
            TimeZoneId = model.TimeZoneId,
            Title = model.Title
        };
    }
}

[Route("api/Values")]
public class ValuesController 
{ 
       public ValuesController( IMapper<CalendarEvent, CalendarEventViewModel> calendarMapper)
       {
           _calendarMapper = calendarMapper;
       }

        // GET api/values/5
        [HttpGet("{id}")]
        public IActionResult Get(int id)
        {

            var calendarEvent = GetMyCalendarEventFromDB(id);

            return this.Ok(_calendarMapper.Map(calendarEvent));
        }

        private CalendarEvent GetMyCalendarEventFromDB(int id)
        {
            return new CalendarEvent("yyyy-dd-MM")
            {
                EndDateTimeUtc = DateTime.UtcNow.AddHours(3),
                EventId = id,
                IsApproved = true,
                StartDateTimeUtc = DateTime.UtcNow.AddHours(2),
                Summary = "My magical Event",
                TimeZoneId = "UTC",
                Title = "Magical Event"
            };
        }
    }
}

Safari：

<div id='data' style='display: none'>{"phone":"012345678"}</div>

这会导致JSON.parse（）在客户端失败。我该如何阻止这种行为。

Answer 1

您必须将此添加到html索引

<meta name="format-detection" content="telephone=no">

Answer 2

Maimilano Poggio的建议非常好。但是，它对我没有用，因为我仍然希望自动格式化电话号码可以在网页的其他部分使用。因此，我想出了自己的解决方案。我使用<div/>标签而不是使用<pre/>标签。这样可以确保相关部分不会在iOS Safari中意外格式化。

iOS 10 Safari浏览器插入电话号码链接

2 个答案: