javascript - 使用 JavaScript 或 jQuery 检查 iframe 页面是否有内容

标签 javascript jquery html css iframe

我正在动态创建一个从页面中提取内容的 iframe 标记,如何在显示之前检查我从中提取的页面是否包含内容?我应该在生成 iframe 标记之前先检查内容吗?

如何检查 iframe 页面是否为“<html><body></body></html>” ',因此不显示'adContainer'?

这是我到目前为止编写的一些代码...

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

// set ad iframe
function setAdiFrame(iWidth, iHeight, bookname) {
  var randNum = Math.floor(Math.random()*1000000000);
  var adFrame = document.createElement('IFRAME');
  setAttributes(adFrame, {
    "src": "http://www.foo.com/" + bookname + "/;cat=" + bookname + ";sz=" + iWidth + "x" + iHeight + ";ord=" + randNum,
    "height": iHeight,
    "width": iWidth,
    "border": "0",
    "scrolling": "no",
    "allowtransparency": "true"
  });
  $('.ad').append(adFrame);
}

// ad container
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
  // check if it's mobile
  if(categorizr.isMobile) {
    setAdiFrame(300, 400, 'bookname');
  // otherwise, show desktop ad
  } else {
    setAdiFrame(728, 660, 'bookname');
  }
  // show ad once iframe page is loaded
  adContainer.find('iframe').on('load', function() {
    adContainer.css('display', 'block');
  });
}

adContainer 的输出标记是这样的。

<div class="ad-container" style="display: block;">
    <div class="ad">
        <a id="close" href="button:close"></a>
            <iframe src="http://www.foo.com;bookname/;cat=bookname;sz=728x660;ord=849890967" height="660" width="728" border="0" scrolling="no" allowtransparency="true"></iframe>
    </div>
</div>

在 IFrame 页面的 src 中输出的 html 可能是 '<html><head></head><body></body></html> '.如果是这样,我不想显示 adContainer。

最佳答案

if(adFrame.contents().find("body").html()=="") {
    adContainer.css('display', 'none');
}

关于javascript - 使用 JavaScript 或 jQuery 检查 iframe 页面是否有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18437078/

相关文章:

javascript - 根据其内部元素动态更改 CSS

javascript - 在 Python 中使用回调下载 CSV

jquery - ajax 请求后下载文件在 Chrome iOS 和 Android 中不起作用

jquery - 如何快速获取json ajax数据并将其存储在localstorage中并在jquery mobile listview中显示

javascript - CSS动态调整div重叠

html - 表格单元格内部时的 CSS z-index 问题

javascript - 正则表达式验证在函数调用时未返回正确结果

javascript - 旋转功能在 onmousedown 上不起作用?

javascript - Cordova如何翻转整个屏幕正面到背面的3D效果

html - 当另一个标签悬停时,是否有纯 CSS 方法来更改选中的单选按钮标签样式?