javascript iframe跨域自适应高度-白红宇

javascript iframe跨域自适应高度

阅读量：2241 次

发布时间：2019-05-09

本文共 2083 字，大约阅读时间需要 6 分钟。

原理：通过在父窗口注册监听事件，子窗口获取事件并操作事件

方式方法：（插件方式）

举例：比如，在yahoo页面需要放入一个iframe插件

1.制作一段js代码，大致如下：

CHAJIAN.Button.setup({href: "http://store.shopping.yahoo.co.jp/vitafelice/9034.html"});

</script>

这是直接提供给yahoo的js插件，plugins-all.js内容如下：

/**

* 提供给第三方代码

var CHAJIAN = CHAJIAN || {};

(function(CHAJIAN ) {

var getHref = function() {

return window.location.href;

};

var getButton = function(setting) {

var _src = "http://192.168.0.108:7788/Plugins/voice.php?";

var _href = setting.href;

_href = typeof(_href) != "undefined"?_href:getHref();

_src =_src +"href="+_href;

var props = {};

props.width = "320";//default

props.id = "sp_iframe";

props.name = "sp_iframe";

props.frameborder = "0";

props.allowtransparency = "true";

props.marginhight = "0";

props.marginwidth = "0";

props.scrolling = "no";

props.src = _src;

SHOPAL.Utils.createElement("iframe",props,$("shopal"));

};

var $ = function(_objId) {

return document.getElementById(_objId);

};

// Button

CHAJIAN.Button = {};

CHAJIAN.Button.setup = function(setting) {

if (typeof (getButton) != "undefined") {

getButton(setting);

if (window.addEventListener) { //for W3C DOM

window.addEventListener("message", receiveSize, false);

} else if (window.attachEvent) { //for IE

window.attachEvent("onmessage",receiveSize);

}

};

function receiveSize(e) {

document.getElementById("sp_iframe").height = e.data;

}

})(CHAJIAN);

************************以上是提供给第三方的代码，setting 可以是json格式的参数

2.在自己的域名下就可以这样设置父类（yahoo域名下）的iframe高度：

/**

* timer autoSetHeight

* iframe跨域自适应高

var sp_iframe_height = 0;

function autoSetHeight(){

var height = document.body.offsetHeight || document.body.scrollHeight; //offsetHeight/scrollHeight

var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

if (typeof target != "undefined"){

if (height != sp_iframe_height) {

target.postMessage(height, '*');

sp_iframe_height = height;

}

};

setInterval(autoSetHeight,200);

大功告成。。。

http://blog.sina.com.cn/s/blog_61b570ab0100rhep.html

转载地址：http://etebb.baihongyu.com/

你可能感兴趣的文章

详解循环神经网络(Recurrent Neural Network)

查看>>

为什么要用交叉验证

查看>>

用学习曲线 learning curve 来判别过拟合问题

查看>>

用验证曲线 validation curve 选择超参数

查看>>

用 Grid Search 对 SVM 进行调参

查看>>

用 Pipeline 将训练集参数重复应用到测试集

详解 Stacking 的 python 实现

用 Doc2Vec 得到文档／段落／句子的向量表达

查看>>