如何将DHLE物流点地图URL直接加载到网页的div容器中？

这个问题我之前碰到过类似的情况，大概率是因为DHL的这个地图页面做了跨域嵌入限制，咱们一步步来拆解原因和解决方案：

问题根源 #

DHL的这个地图页面服务器返回了X-Frame-Options响应头（通常是SAMEORIGIN或者DENY），浏览器出于安全考虑，会阻止其他域名的网页把这个页面嵌入到iframe、frame或者object标签中，所以你直接尝试加载会显示空白。

你可以自己验证一下：打开浏览器开发者工具（F12），在Console里输入这段代码测试：

<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800" height="600"></iframe>

之后你会在Console里看到类似这样的报错：

Refused to display 'https://servicepoints.dhlecommerce.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

这就坐实了是跨域嵌入被限制的问题。

可行的解决方案 #

1. 优先使用官方嵌入API/Widget #

最稳妥的方式是查找DHL e-commerce的开发者文档，看他们是否提供了官方的地图嵌入组件或者API。很多物流服务商都会专门提供这类工具，允许你在自己的页面里加载服务点地图，而不需要直接嵌入整个页面。

假设官方提供了类似的Widget，代码大概会是这样的：

<!-- 引入官方Widget脚本 -->
<script src="https://servicepoints.dhlecommerce.com/widget.min.js"></script>
<!-- 地图容器 -->
<div id="dhl-service-map" data-coords="3.16327,101.69507" data-lang="en"></div>
<!-- 初始化Widget -->
<script>
  DHLServicesMap.init('dhl-service-map');
</script>

这种方式完全符合官方的安全规则，不会有加载问题。

2. 用弹窗/新窗口打开地图 #

如果暂时找不到官方的嵌入方案，你可以换个思路：不在页面内嵌入，而是提供一个按钮，让用户点击后在新标签页或者模态弹窗里打开地图链接。

用jQuery实现的代码示例：

$(function(){
  // 给按钮绑定点击事件
  $("#open-dhl-map").on("click", function(){
    // 在新标签页打开地图
    window.open("https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en", "_blank");
  });
});

对应的HTML按钮：

<button id="open-dhl-map">查看DHL服务点地图</button>

3. 避免尝试绕过限制 #

不要尝试用AJAX抓取页面内容再渲染，或者用代理服务器转发请求这类方式——一方面这可能违反DHL的服务条款，另一方面后续页面结构或者安全规则变化后，你的代码会直接失效，得不偿失。

内容的提问来源于stack exchange，提问作者user2024080