javascript - 如何在同一页面上运行两个相同的联合脚本？

Question

我有一个从我们的 Sharp 经销商处获得的脚本，用于在我们的网站上展示机器。当我用不同的模型(数据名称)添加它两次时，它只运行第一个并在图像在页面上闪烁后丢弃图像。我确实尝试更改第二个的 div id，但没有成功。

示例 1:

<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>

示例 2:

<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3070N'></script>
<div id='sharp-widget'></div>

Answer 1

根据您在上面使用的源代码，您不能，至少不能没有某种解决方法。

您使用的 javascript 明确期望一个 ID 为“sharp-widget”的项目，但 HTML 不验证重复的 ID，因此 jQuery 不会呈现它。

我的建议是联系脚本的提供者，让您将 id 作为参数传递，或者，如果不可能，请采取一些解决方法，例如向第二个 iframe 添加 iframe，例如:

<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>

<iframe src="./inc.html" style="width: 100%; border: none">

</iframe>

和inc.html

<script src='http://siica.sharpusa.com/DesktopModules/X3.Sharp.ProductCatalog/js/GetProduct.js' type='text/javascript' data-type='MFPs' data-name='MX-3050N'></script>
<div id='sharp-widget'></div>