跨域实现IFRAME自适应高度

<html>
<head>
</head>
<body>
<script>
document.domain="sina.com";
function adjustIframe(id)
 {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
 }



     
       var ifm=document.createElement("iframe");
      ifm.src="http://test.sina.com/2.htm";
      ifm.width=1000;
       ifm.id="ok1";
       ifm.domain="sina.com";
      document.body.appendChild(ifm);
      adjustIframe("ok1");

   

</script>

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用iframe实现内容嵌套时,有时会遇到跨域自适应高度的问题。这是因为浏览器出于安全原因,不允许从一个源(域名)加载另一个源的内容,除非服务器提供了适当的CORS(跨源资源共享)策略。对于跨域问题,你需要在服务器端设置允许跨域请求,或者在前端使用JSONP或者代理服务器来间接访问。 至于iframe高度自适应,Vue本身并不能直接处理iframe高度变化,因为它是在DOM渲染后处理数据的。但你可以通过以下方法解决: 1. 利用JavaScript事件监听:给iframe添加`load`或`message`事件,在事件触发时获取iframe的实际高度并更新其CSS样式。 ```javascript new Vue({ el: '#myIframe', methods: { updateIframeHeight() { this.$refs.myIframe.addEventListener('load', () => { this.$refs.myIframe.style.height = `${this.myIframeContentHeight}px`; }); } }, mounted() { this.updateIframeHeight(); } }) ``` 2. 使用Intersection Observer API:这是一个现代浏览器提供的API,可以检测元素是否进入或离开视口,适用于动态内容。你可以创建一个观察者,当iframe进入视口时计算其高度。 ```javascript const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.myIframeContentHeight = entry.target.contentDocument.body.scrollHeight; } }); }); observer.observe(this.$refs.myIframe); ``` 3. 使用第三方库如`vue-observe-visibility-events`:这个库可以帮助你在元素可见时执行回调,可以配合上述方法使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值