html [jscript]终极iFrame嵌入!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html [jscript]终极iFrame嵌入!相关的知识,希望对你有一定的参考价值。
/*! iFrame Resizer (iframeSizer.min.js ) - v2.6.1 - 2014-09-03
* Desc: Force cross domain iframes to size to content.
* Requires: iframeResizer.contentWindow.min.js to be loaded into the target frame.
* Copyright: (c) 2014 David J. Bradshaw - dave@bradshaw.net
* License: MIT
*/
!function(){"use strict";function a(a,b,c){"addEventListener"in window?a.addEventListener(b,c,!1):"attachEvent"in window&&a.attachEvent("on"+b,c)}function b(){var a,b=["moz","webkit","o","ms"];for(a=0;a<b.length&&!w;a+=1)w=window[b[a]+"RequestAnimationFrame"];w||c(" RequestAnimationFrame not supported")}function c(a){y.log&&"object"==typeof console&&console.log(s+"[Host page"+u+"]"+a)}function d(a){function b(){function a(){h(z),f(),y.resizedCallback(z)}i(a,z,"resetPage")}function d(a){var b=a.id;c(" Removing iFrame: "+b),a.parentNode.removeChild(a),y.closedCallback(b),c(" --")}function e(){var a=x.substr(t).split(":");return{iframe:document.getElementById(a[0]),id:a[0],height:a[1],width:a[2],type:a[3]}}function j(a){var b=Number(y["max"+a]),d=Number(y["min"+a]),e=a.toLowerCase(),f=Number(z[e]);if(d>b)throw new Error("Value for min"+a+" can not be greater than max"+a);c(" Checking "+e+" is in range "+d+"-"+b),d>f&&(f=d,c(" Set "+e+" to min value")),f>b&&(f=b,c(" Set "+e+" to max value")),z[e]=""+f}function k(){var b=a.origin,d=z.iframe.src.split("/").slice(0,3).join("/");if(y.checkOrigin&&(c(" Checking connection is from: "+d),""+b!="null"&&b!==d))throw new Error("Unexpected message received from: "+b+" for "+z.iframe.id+". Message was: "+a.data+". This error can be disabled by adding the checkOrigin: false option.");return!0}function l(){return s===(""+x).substr(0,t)}function m(){var a=z.type in{"true":1,"false":1};return a&&c(" Ignoring init message from meta parent page"),a}function n(){var a=x.substr(x.indexOf(":")+r+6);c(" MessageCallback passed: {iframe: "+z.iframe.id+", message: "+a+"}"),y.messageCallback({iframe:z.iframe,message:a}),c(" --")}function o(){if(null===z.iframe)throw new Error("iFrame ("+z.id+") does not exist on "+u);return!0}function q(){c(" Reposition requested from iFrame"),v={x:z.width,y:z.height},f()}function w(){switch(z.type){case"close":d(z.iframe),y.resizedCallback(z);break;case"message":n();break;case"scrollTo":q();break;case"reset":g(z);break;case"init":b(),y.initCallback(z.iframe);break;default:b()}}var x=a.data,z={};l()&&(c(" Received: "+x),z=e(),j("Height"),j("Width"),!m()&&o()&&k()&&(w(),p=!1))}function e(){null===v&&(v={x:void 0!==window.pageXOffset?window.pageXOffset:document.documentElement.scrollLeft,y:void 0!==window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop},c(" Get position: "+v.x+","+v.y))}function f(){null!==v&&(window.scrollTo(v.x,v.y),c(" Set position: "+v.x+","+v.y),v=null)}function g(a){function b(){h(a),j("reset","reset",a.iframe)}c(" Size reset requested by "+("init"===a.type?"host page":"iFrame")),e(),i(b,a,"init")}function h(a){function b(b){a.iframe.style[b]=a[b]+"px",c(" IFrame ("+a.iframe.id+") "+b+" set to "+a[b]+"px")}y.sizeHeight&&b("height"),y.sizeWidth&&b("width")}function i(a,b,d){d!==b.type&&w?(c(" Requesting animation frame"),w(a)):a()}function j(a,b,d){c("["+a+"] Sending msg to iframe ("+b+")"),d.contentWindow.postMessage(s+b,"*")}function k(){function b(){function a(a){1/0!==y[a]&&0!==y[a]&&(k.style[a]=y[a]+"px",c(" Set "+a+" = "+y[a]+"px"))}a("maxHeight"),a("minHeight"),a("maxWidth"),a("minWidth")}function d(a){return""===a&&(k.id=a="iFrameResizer"+o++,c(" Added missing iframe ID: "+a+" ("+k.src+")")),a}function e(){c(" IFrame scrolling "+(y.scrolling?"enabled":"disabled")+" for "+l),k.style.overflow=!1===y.scrolling?"hidden":"auto",k.scrolling=!1===y.scrolling?"no":"yes"}function f(){("number"==typeof y.bodyMargin||"0"===y.bodyMargin)&&(y.bodyMarginV1=y.bodyMargin,y.bodyMargin=""+y.bodyMargin+"px")}function h(){return l+":"+y.bodyMarginV1+":"+y.sizeWidth+":"+y.log+":"+y.interval+":"+y.enablePublicMethods+":"+y.autoResize+":"+y.bodyMargin+":"+y.heightCalculationMethod+":"+y.bodyBackground+":"+y.bodyPadding+":"+y.tolerance}function i(b){a(k,"load",function(){var a=p;j("iFrame.onload",b,k),!a&&y.heightCalculationMethod in x&&g({iframe:k,height:0,width:0,type:"init"})}),j("init",b,k)}var k=this,l=d(k.id);e(),b(),f(),i(h())}function l(a){if("object"!=typeof a)throw new TypeError("Options is not an object.")}function m(){function a(a){if("IFRAME"!==a.tagName.toUpperCase())throw new TypeError("Expected <IFRAME> tag, found <"+a.tagName+">.");k.call(a)}function b(a){a=a||{},l(a);for(var b in z)z.hasOwnProperty(b)&&(y[b]=a.hasOwnProperty(b)?a[b]:z[b])}return function(c,d){b(c),Array.prototype.forEach.call(document.querySelectorAll(d||"iframe"),a)}}function n(a){a.fn.iFrameResize=function(b){return b=b||{},l(b),y=a.extend({},z,b),this.filter("iframe").each(k).end()}}var o=0,p=!0,q="message",r=q.length,s="[iFrameSizer]",t=s.length,u="",v=null,w=window.requestAnimationFrame,x={max:1,scroll:1,bodyScroll:1,documentElementScroll:1},y={},z={autoResize:!0,bodyBackground:null,bodyMargin:null,bodyMarginV1:8,bodyPadding:null,checkOrigin:!0,enablePublicMethods:!1,heightCalculationMethod:"offset",interval:32,log:!1,maxHeight:1/0,maxWidth:1/0,minHeight:0,minWidth:0,scrolling:!1,sizeHeight:!0,sizeWidth:!1,tolerance:0,closedCallback:function(){},initCallback:function(){},messageCallback:function(){},resizedCallback:function(){}};b(),a(window,"message",d),"jQuery"in window&&n(jQuery),"function"==typeof define&&define.amd?define(function(){return m()}):window.iFrameResize=m()}();
//# sourceMappingURL=../src/iframeResizer.map
/*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v2.6.1 - 2014-09-03
* Desc: Include this file in any page being loaded into an iframe
* to force the iframe to resize to the content size.
* Requires: iframeResizer.min.js on host page.
* Copyright: (c) 2014 David J. Bradshaw - dave@bradshaw.net
* License: MIT
*/
!function(){"use strict";function a(a,b,c){"addEventListener"in window?a.addEventListener(b,c,!1):"attachEvent"in window&&a.attachEvent("on"+b,c)}function b(a){return $+"["+ab+"] "+a}function c(a){Z&&"object"==typeof window.console&&console.log(b(a))}function d(a){"object"==typeof window.console&&console.warn(b(a))}function e(){c("Initialising iFrame"),f(),i(),h("background",L),h("padding",O),o(),m(),j(),p(),n(),D("init","Init message from host page")}function f(){function a(a){return"true"===a?!0:!1}var b=X.substr(_).split(":");ab=b[0],M=void 0!==b[1]?Number(b[1]):M,P=void 0!==b[2]?a(b[2]):P,Z=void 0!==b[3]?a(b[3]):Z,Y=void 0!==b[4]?Number(b[4]):Y,bb=void 0!==b[5]?a(b[5]):bb,J=void 0!==b[6]?a(b[6]):J,N=b[7],V=void 0!==b[8]?b[8]:V,L=b[9],O=b[10],fb=void 0!==b[11]?Number(b[11]):fb}function g(a,b){return-1!==b.indexOf("-")&&(d("Negative CSS value ignored for "+a),b=""),b}function h(a,b){void 0!==b&&""!==b&&"null"!==b&&(document.body.style[a]=b,c("Body "+a+' set to "'+b+'"'))}function i(){void 0===N&&(N=M+"px"),g("margin",N),h("margin",N)}function j(){document.documentElement.style.height="",document.body.style.height="",c('HTML & body height set to "auto"')}function k(){a(window,"resize",function(){D("resize","Window resized")})}function l(){a(window,"click",function(){D("click","Window clicked")})}function m(){U!==V&&(V in jb||(d(V+" is not a valid option for heightCalculationMethod."),V="bodyScroll"),c('Height calculation method set to "'+V+'"'))}function n(){!0===J?(k(),l(),s()):c("Auto Resize disabled")}function o(){var a=document.createElement("div");a.style.clear="both",a.style.display="block",document.body.appendChild(a)}function p(){bb&&(c("Enable public methods"),window.parentIFrame={close:function(){D("close","parentIFrame.close()",0,0)},getId:function(){return ab},reset:function(){G("parentIFrame.size")},scrollTo:function(a,b){H(b,a,"scrollTo")},sendMessage:function(a,b){H(0,0,"message",a,b)},setHeightCalculationMethod:function(a){V=a,m()},setTargetOrigin:function(a){c("Set targetOrigin: "+a),db=a},size:function(a,b){var c=""+(a?a:"")+(b?","+b:"");E(),D("size","parentIFrame.size("+c+")",a,b)}})}function q(){0!==Y&&(c("setInterval: "+Y+"ms"),setInterval(function(){D("interval","setInterval: "+Y)},Math.abs(Y)))}function r(b){function d(b){(void 0===b.height||void 0===b.width||0===b.height||0===b.width)&&(c("Attach listerner to "+b.src),a(b,"load",function(){D("imageLoad","Image loaded")}))}b.forEach(function(a){if("attributes"===a.type&&"src"===a.attributeName)d(a.target);else if("childList"===a.type){var b=a.target.querySelectorAll("img");Array.prototype.forEach.call(b,function(a){d(a)})}})}function s(){function a(){var a=document.querySelector("body"),d={attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0},e=new b(function(a){D("mutationObserver","mutationObserver: "+a[0].target+" "+a[0].type),r(a)});c("Enable MutationObserver"),e.observe(a,d)}var b=window.MutationObserver||window.WebKitMutationObserver;b?0>Y?q():a():(d("MutationObserver not supported in this browser!"),q())}function t(){function a(a){function b(a){var b=/^\d+(px)?$/i;if(b.test(a))return parseInt(a,K);var d=c.style.left,e=c.runtimeStyle.left;return c.runtimeStyle.left=c.currentStyle.left,c.style.left=a||0,a=c.style.pixelLeft,c.style.left=d,c.runtimeStyle.left=e,a}var c=document.body,d=0;return"defaultView"in document&&"getComputedStyle"in document.defaultView?(d=document.defaultView.getComputedStyle(c,null),d=null!==d?d[a]:0):d=b(c.currentStyle[a]),parseInt(d,K)}return document.body.offsetHeight+a("marginTop")+a("marginBottom")}function u(){return document.body.scrollHeight}function v(){return document.documentElement.offsetHeight}function w(){return document.documentElement.scrollHeight}function x(){for(var a=document.querySelectorAll("body *"),b=a.length,d=0,e=(new Date).getTime(),f=0;b>f;f++)a[f].getBoundingClientRect().bottom>d&&(d=a[f].getBoundingClientRect().bottom);return e=(new Date).getTime()-e,c("Parsed "+b+" HTML elements"),c("LowestElement bottom position calculated in "+e+"ms"),d}function y(){return[t(),u(),v(),w()]}function z(){return Math.max.apply(null,y())}function A(){return Math.min.apply(null,y())}function B(){return Math.max(t(),x())}function C(){return Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)}function D(a,b,d,e){function f(){a in{reset:1,resetPage:1,init:1}||c("Trigger event: "+b)}function g(){S=n,ib=o,H(S,ib,a)}function h(){return gb&&a in Q}function i(){function a(a,b){var c=Math.abs(a-b)<=fb;return!c}return n=void 0!==d?d:jb[V](),o=void 0!==e?e:C(),a(S,n)||P&&a(ib,o)}function j(){return!(a in{init:1,interval:1,size:1})}function k(){return V in cb}function l(){c("No change in size detected")}function m(){j()&&k()?G(b):a in{interval:1}||(f(),l())}var n,o;h()?c("Trigger event cancelled: "+a):i()?(f(),E(),g()):m()}function E(){gb||(gb=!0,c("Trigger event lock on")),clearTimeout(hb),hb=setTimeout(function(){gb=!1,c("Trigger event lock off"),c("--")},R)}function F(a){S=jb[V](),ib=C(),H(S,ib,a)}function G(a){var b=V;V=U,c("Reset trigger event: "+a),E(),F("reset"),V=b}function H(a,b,d,e,f){function g(){void 0===f?f=db:c("Message targetOrigin: "+f)}function h(){var g=a+":"+b,h=ab+":"+g+":"+d+(void 0!==e?":"+e:"");c("Sending message to host page ("+h+")"),eb.postMessage($+h,f)}g(),h()}function I(a){function b(){return $===(""+a.data).substr(0,_)}function f(){X=a.data,eb=a.source,e(),T=!1,setTimeout(function(){W=!1},R)}function g(){W?c("Page reset ignored by init"):(c("Page size reset by host page"),F("resetPage"))}function h(){return a.data.split("]")[1]}function i(){return"iFrameResize"in window}function j(){return a.data.split(":")[2]in{"true":1,"false":1}}b()&&(T&&j()?f():"reset"===h()?g():a.data===X||i()||d("Unexpected message ("+a.data+")"))}var J=!0,K=10,L="",M=0,N="",O="",P=!1,Q={resize:1,click:1},R=128,S=1,T=!0,U="offset",V=U,W=!0,X="",Y=32,Z=!1,$="[iFrameSizer]",_=$.length,ab="",bb=!1,cb={max:1,scroll:1,bodyScroll:1,documentElementScroll:1},db="*",eb=window.parent,fb=0,gb=!1,hb=null,ib=1,jb={offset:t,bodyOffset:t,bodyScroll:u,documentElementOffset:v,scroll:w,documentElementScroll:w,max:z,min:A,grow:z,lowestElement:B};a(window,"message",I)}();
//# sourceMappingURL=../src/iframeResizer.contentWindow.map
var scripts = document.getElementsByTagName('script');
var myScript = scripts[scripts.length - 1];
var myScriptSrc = myScript.src;
if (myScriptSrc.indexOf('embed.js') > -1) {
//*** create the params object and assing values to it.***//
//*** use params passed to the JS file.***//
var queryString = myScriptSrc.replace(/^[^\?]+\??/, '');
var params = parseQuery(queryString);
if (typeof params.partner != 'undefined') {
if (params.partner.length == 0) {
params.partner = 'JustFacts';
}
} else {
params.partner = 'JustFacts';
}
if (typeof params.question != 'undefined') {
if (params.question.length == 0) {
params.question = '0';
}
} else {
params.question = '0';
}
//*** insert the iframe object into page.***//
var iFrameSrc = 'http://q.justfactsdaily.com/index.html?partner=' + params.partner + '&question=' + params.question;
document.write('<style>');
document.write('iframe.noScrolling { overflow: hidden; }'); //*** IFRAME "SCROLLING=NO" IS NOT SUPPORTED BY HTML5.***//
document.write('iframe.noScrolling::-webkit-scrollbar { display: none; }'); //*** FOR CHROME & SAFARI ***//
document.write('</style>');
document.write('<iframe id="JustFactsIFrame" src="' + iFrameSrc + '" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true" class="noScrolling"></iframe>');
}
function parseQuery(query) {
var params = new Object();
if (!query) return params; // return empty object
var pairs = query.split(/[;&]/);
for (var i = 0; i < pairs.length; i++) {
var keyVal = pairs[i].split('=');
if (!keyVal || keyVal.length != 2) continue;
var key = unescape(keyVal[0]);
var val = unescape(keyVal[1]);
val = val.replace(/\+/g, ' ');
params[key] = val;
}
return params;
}
/*
***************************************************************************
SCRIPT BELOW PRE-LOADS THE IFRAME.
SHOWS A LOADING DIV UNTIL IT DOES.
***************************************************************************
*/
/**
* Global Static Event Utilities helper that assists us to add
* cross platform events to any DOM object as well retrieving
* their target if any exists.
*
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
var event_utils = {
add: function(obj, type, callback) {
if (obj.addEventListener)
obj.addEventListener(type, callback, false);
else if (obj.attachEvent)
obj.attachEvent("on" + type, callback);
}
}
/**
* Preloads an IFrame since it may take time to load.
*
* @param {string} id The identifier for the Iframe you want preloaded.
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
IFramePreloader = function(id)
{
that = this;
this.id = id;
this.iframe = document.getElementById(id);
this.placeholder = this.createPlaceholder();
}
IFramePreloader.prototype = {
/**
* Initializes the preloader to wait till a load event occurs in the iframe.
*/
init: function()
{
this.iframe.style.display = 'none';
event_utils.add(this.iframe, 'load', function(e) { that.handleLoad(e); });
},
/**
* Creates the placeholder for that Iframe.
* @return {Element} The placeholder element.
*/
createPlaceholder: function()
{
// Create placeholder.
var newElement = document.createElement('div');
newElement.id = this.id + '-placeholder';
newElement.appendChild(document.createTextNode('Loading ...'));
// Adding that placeholder right after the iframe. We first check if its the
// last child, if so, we just append it. Otherwise, we insert it before the
// next sibling.
var parent = this.iframe.parentNode;
if (parent.lastChild == this.iframe) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, this.iframe.nextSibling);
}
return newElement;
},
/**
* Show the frame, hide the preloader. Since it has been loaded!
*/
handleLoad: function()
{
this.iframe.style.display = 'block';
this.placeholder.style.display = 'none';
}
}
var preloader = new IFramePreloader('JustFactsIFrame');
preloader.init();
<!-- PROVIDER / CHILD PAGE -->
<!DOCTYPE html>
<html>
<head>
<title>PROVIDER / CHILD PAGE</title>
</head>
<body>
<!-- script below performs auto-height resizing on the iframe -->
<!--https://github.com/davidjbradshaw/iframe-resizer-->
<script src="js/lib/iframeResizer.contentWindow.min.js" type="text/javascript"></script>
</body>
</html>
<!-- CONSUMER / PARENT PAGE -->
<!DOCTYPE html>
<html>
<body>
<script src="http://q.justfactsdaily.com/embed.js?partner=FreeThinkU&question=210101"></script>
<!-- script below performs auto-height resizing on the iframe -->
<!--https://github.com/davidjbradshaw/iframe-resizer-->
<script src="http://q.justfactsdaily.com/js/lib/iframeResizer.min.js"></script>
<script>iFrameResize();</script>
</body>
</html>
以上是关于html [jscript]终极iFrame嵌入!的主要内容,如果未能解决你的问题,请参考以下文章