jquery操作ifram读取页面dom属性,利用vue实现智能广告位

公司提出一个智能广告位管理系统,随意输入一处公司网站网址即可读取到该页面有几个广告位。并将该网址页面作为背景图置于底层,精准定位每个页面的广告位所在位置并提供配置参数按钮。

解决跨域问题

要将ifram页面当做背景,又要随机获取公司任一网址ifarm dom属性。公司管理后台的地址是官网的二级域名,前台网页又都是各不一致的一二级域名,此时就涉及跨域问题,解决方案。在管理后台界面及调用ifram页面设置

document.domain ='shiyongjiao.cn'; //设置同域

解决获取ifram页面参数问题

直接上代码

//ifram页面设置参数,利用jquery attr读取


//管理后台代码

$("#myiframe").load(function () {

          //这里放底下截图的代码

})//ifram资源加载完成后执行

jquery操作ifram读取页面dom属性,利用vue实现智能广告位_第1张图片
//用于每次刷新时控制IFRAME高度初始化

声明了一大堆空数组存放从ifram页面读取到的属性


jquery操作ifram读取页面dom属性,利用vue实现智能广告位_第2张图片

//找到并循环ifram页面class名称为index_create的div并循环参数;三元表达式的表示有写值的则取attr的值,无值则取dom属性值


jquery操作ifram读取页面dom属性,利用vue实现智能广告位_第3张图片

//最后将所有取到的参数数组合并为json。在赋值给createList 利用v-for循环准确定位各广告在ifram所在的位置及表单提交的参数


jquery操作ifram读取页面dom属性,利用vue实现智能广告位_第4张图片

//前台v-for

jquery操作ifram读取页面dom属性,利用vue实现智能广告位_第5张图片

你可能感兴趣的:(jquery操作ifram读取页面dom属性,利用vue实现智能广告位)