此代码段中显示了2个简单的JS函数：
function ReplaceHeader(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
function ReplaceContent(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}.st0 {
fill: #C6C8AB;
}
.st1 {
clip-path: url("#SVGID_2_");
fill: #C6C8AB;
}
.st2 {
fill: #5362FF;
}
.st3 {
fill: #2A4D5C;
}
.st4 {
font-family: 'HalisR-Bold';
}
.st5 {
font-size: 10px;
}
.st6 {
enable-background: new;
}
.st7 {
fill: none;
stroke: #C6C8AB;
stroke-width: 3;
}
.st8 {
clip-path: url("#SVGID_4_");
fill: none;
stroke: #C6C8AB;
stroke-width: 3;
stroke-miterlimit: 10;
}
path.active {
stroke: #5362FF;
stroke-width: 8px;
paint-order: stroke;
stroke-linejoin: round;
}
text.active tspan {
fill: #5362FF !important;
}
.gd-globe a:hover > path {
stroke: #5362FF;
stroke-width: 8px;
paint-order: stroke;
stroke-linejoin: round;
}
.gd-globe a:hover > text tspan, .gd-globe a:hover > text {
fill: #5362FF !important;
}<div class="gd-globe">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve">
<!-- Click replace content JS -->
<rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/>
<rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/>
<rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/>
<rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/>
<rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/>
<rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/>
<rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/>
<g>
<defs>
<rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path
class="st1"
d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6
c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6
C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6
c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2
c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/>
</g>
<path
class="st2"
d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2
c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7
c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33
c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244
c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/>
<!-- Social Entrepreneurs -->
<a href="javascript:ReplaceHeader('header','Social Entrepreneurs'); javascript:ReplaceContent('content','some content'); ">
<path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0
C324.6,147.5,327.7,150.6,331.4,150.6"/>
<text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
<tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan>
<tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan>
</text>
</a>
</svg>
</div>
<h5 id="header" class="h2" style="font-size:18px; text-align:left;">header</h2>
<span class="copy" id="content">title</span>
以及一些带有内联函数编码的href。 href围绕SVG。我已经用所有代码创建了Codepen：
https://codepen.io/maniac123/pen/PXovZq
在单击href时，应该更改ID为“ header”的h2中的值和ID为“ content”的跨度中的值。
这一切在台式机上都可以完美运行，但是在iPhone设备和android上，它没有获取任何值。 h2和跨度没有变化。
答案 0 :(得分：2)
问题来自javascript:someFunction SVG并不是问题。
似乎javascript:someFunction并非在所有浏览器中都有效。
这意味着不仅手机在遭受苦难。
请查看：a href=javascript:function() in firefox not working。
这也是一个有趣的讨论：JavaScript function in href vs. onclick。
要回答您的问题，我将使用如下所示的onlick：
// Made the functions to 1 function because the content was the same
function ReplaceContent(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}<a href='#' onclick='
ReplaceContent("header", "New header")
ReplaceContent("text", "More Lorem ipsum...")
' >test</a>
<h2 id='header'>Header</h2>
<p id='text'>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
我相信下一个代码段更易于重用：
function LinkReplace() {
// Now you do not need to fiddle in the HTML for JS functions
ReplaceContent("header", "New header")
ReplaceContent("text", "More Lorem ipsum...")
}
function ReplaceContent(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}<a href='#' onclick='LinkReplace()' >test</a>
<h2 id='header'>Header</h2>
<p id='text'>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
使用SVG：
function LinkReplace() {
// Now you do not need to fiddle in the HTML for JS functions
ReplaceContent("header", "New header")
ReplaceContent("text", "More Lorem ipsum...")
}
function ReplaceContent(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}.st0 {
fill: #C6C8AB;
}
.st1 {
clip-path: url("#SVGID_2_");
fill: #C6C8AB;
}
.st2 {
fill: #5362FF;
}
.st3 {
fill: #2A4D5C;
}
.st4 {
font-family: 'HalisR-Bold';
}
.st5 {
font-size: 10px;
}
.st6 {
enable-background: new;
}
.st7 {
fill: none;
stroke: #C6C8AB;
stroke-width: 3;
}
.st8 {
clip-path: url("#SVGID_4_");
fill: none;
stroke: #C6C8AB;
stroke-width: 3;
stroke-miterlimit: 10;
}
path.active {
stroke: #5362FF;
stroke-width: 8px;
paint-order: stroke;
stroke-linejoin: round;
}
text.active tspan {
fill: #5362FF !important;
}
.gd-globe a:hover > path {
stroke: #5362FF;
stroke-width: 8px;
paint-order: stroke;
stroke-linejoin: round;
}
.gd-globe a:hover > text tspan, .gd-globe a:hover > text {
fill: #5362FF !important;
}<div class="gd-globe">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve">
<rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/>
<rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/>
<rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/>
<rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/>
<rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/>
<rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/>
<rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/>
<g>
<defs>
<rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path
class="st1"
d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6
c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6
C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6
c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2
c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/>
</g>
<path
class="st2"
d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2
c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7
c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33
c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244
c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/>
<!-- Social Entrepreneurs -->
<a href='#' onclick='LinkReplace()'>
<path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0
C324.6,147.5,327.7,150.6,331.4,150.6"/>
<text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6">
<tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan>
<tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan>
</text>
</a>
</svg>
</div>
<h2 id='header'>Header</h2>
<p id='text'>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>