SVG在iFrame下自适应完美解决跨域问题

最新推荐文章于 2024-08-08 12:27:38 发布

ringgit

最新推荐文章于 2024-08-08 12:27:38 发布

阅读量1.8k

点赞数

文章标签： html svg 脚本组态 svg编辑器

本文链接：https://blog.csdn.net/ringgit/article/details/78484022

版权

SVG一般可以嵌入到html下，通过iframe的形式，但是嵌入后的svg文件只有知道自己所在窗口的大小才能做到自适应。因为脚本同源问题，在跨域时在SVG内部通过脚本是无法获取到iframe对象的。即如果html和svg不是属于同一个域名下，相互之间是不能通过脚本进行操作的。

但是在SVG里面通过window.innerWidth可以获取到宽度，window.innerHeight可以获取到高度，经过测试，这个大小刚好就是iframe的大小，并且虽则浏览器大小的改变，这个大小也是动态改变，因此不需要通过获取iframe元素就可以做到获取iframe大小了。在SVG脚本里获得自己所在的窗口大小，那么怎么做自适应不就很简单了吗？SVG编辑可以使用“图也SVG编辑平台”，免费的SVG编辑工具，有大量的免费图库下载，并有svg组态实例，下载地址：http://www.svgsvg.com。

以下是html内容：存储为fittest.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>Untitledfile</title>

</head>

<body>

<iframeid="a" src="fittest.svg" width="300"height="400"/>

</body>

</html>

这是SVG文本内容，打开记事本，存储为fittest.svg即可；

<?xml version="1.0"encoding="utf-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">

<defs>

<scripttype="text/javascript">

<![CDATA[

functionclick(evt)

{

alert(window.innerWidth);

alert(window.innerHeight);

}

]]>

</script>

</defs>

</svg>

ringgit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG在iFrame下自适应完美解决跨域问题

SVG一般可以嵌入到html下，通过iframe的形式，但是嵌入后的svg文件只有知道自己所在窗口的大小才能做到自适应。因为脚本同源问题，在跨域时在SVG内部通过脚本是无法获取到iframe对象的。即如果html和svg不是属于同一个域名下，相互之间是不能通过脚本进行操作的。但是在SVG里面通过window.innerWidth可以获取到宽度，window.innerHeight可以获取到高度
复制链接

扫一扫