我正在这个页面上工作:http://factor1hosting.com/~dnaz/wordpress/certifications/
我试图引入跨域iframe.
我正在使用@DavidJBradshaw的iFrame Resizer来实现这一目标.但是,我没有让iframe正常工作.
我只能使用普通的javascript init:
<script>iFrameResize({log:true})</script>
当我使用它时,我确实得到了日志,但它没有调整大小.我也尝试过jQuery方法:
$('iframe').iFrameResize( [{log: true}] );
并且不要调整日志或iframe的大小.我也尝试将其包装在准备好的文档中,但也无法实现.
任何人都有任何想法或想法,为什么这不正确？我的控制台没有抛出任何JS错误......谢谢!
编辑:这是我目前在HTML方面的设置示例.
<iframe src="http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login" width="100%" scrolling="no"></iframe>
<script>
jQuery(document).ready(function () {
jQuery('iframe').iFrameResize( [{log:true}] );
});
</script>
编辑2:这是我的控制台日志,当它触发时,它将iframe设置为150px,即使内容延伸的时间更长.
[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 (http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login)
iframeResizer.js:97
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
iframeResizer.js:97
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.js:97
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
iframeResizer.contentWindow.js:62
[iFrameSizer][iFrameResizer0] Enable …我需要根据内容高度动态调整我的iframe高度.我正在使用davidjbradshaw的iframeResizer.js来完成任务.我也在内容页面中添加了iframeResizer.contentWindow.js.和iframe页面中的iFrameResizer.min.js.
在调用时iFrameResize({log:false});我在控制台中收到以下错误:
未捕获的ReferenceError:未定义iFrameResize
我也尝试过调用iFrameResize({log:false})iframe的onload,但我仍然遇到同样的错误.
我正在使用Iframe Resizer，但我的代码无法跨域工作。当两个域相同时它工作正常。你能帮我吗？这很奇怪，因为 iframe 肯定加载了 iFrameResizer.contentWindow.js 并且我使用 checkOrigin: false 所以它应该允许跨域...
以下是加载具有 iframe 的父页面时在控制台中出现的错误：
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://jacobjohnson.net') does not match the recipient window's origin ('http://designtesting.cfs.local').
iframeResizer.min.js:8 [iFrameSizer][Host page: display_frame] No response from iFrame. Check iFrameResizer.contentWindow.js has been loaded in iFrame
<div class="panel panel-default" id="iframePanel">
<div class="panel-body" style="padding:0px;">
<iframe id="display_frame" name="display_frame" class="frame" src="http://jacobjohnson.net/iframetest.html" allowfullscreen></iframe>
</div>
</div>
<script>
jQuery('#display_frame').iFrameResize( [{log:true, checkOrigin: false}] );
var frameHeight = 3905; // $('#display_frame').height();
var newHeight = frameHeight / …我有一个 Teamspeak 状态查看脚本，托管在与我的 WordPress 不同的域上。因此，我尝试使用 iframe 在文本/html 小部件中显示脚本结果，但它不会自动调整高度。Wordpress 位于共享主机上，因此该脚本不会从那里与我的 teampeak 服务器进行通信。我找不到任何其他 ts3 查看器可以在自动隐藏空频道的同时工作并且不完全丑陋。经过一些研究后，我发现了似乎是最新、最好的解决方案，David J Bradshaw 的 iframe-resizer。现在我不是这个主题的专家，也不完全明白我应该如何正确设置它。
目前我的 WordPress 小部件如下所示：
<iframe src="http://66.172.12.238/ts3.php" width="100%" scrolling="no"></iframe>
ts3.php 的内容如下：
<html>
<head>
<title>TSStatus</title>
<link rel="stylesheet" type="text/css" href="/ts3/tsstatus.css" />
<script type="text/javascript" src="/ts3/tsstatus.js"></script>
</head>
<body>
<?php
require_once("/var/www/ts3/tsstatus.php");
$tsstatus = new TSStatus("ts3.greatarchitect.us", 10011);
$tsstatus->useServerPort(9987);
$tsstatus->imagePath = "/ts3/img/";
$tsstatus->timeout = 2;
$tsstatus->hideEmptyChannels = true;
$tsstatus->hideParentChannels = true;
$tsstatus->showNicknameBox = false;
$tsstatus->showPasswordBox = false;
echo $tsstatus->render();
?>
</body>
</html>
这就是我现在所拥有的一切。我希望有人可以帮助我正确安装/设置这个 iframe-resizer。
谢谢。
当有人访问我的 WordPress 网站中的特定页面时，我想在其上显示另一个网站的全屏 iframe。它必须完全覆盖我的网页，因此看起来几乎就像用户现在在另一个网站上一样（网址仍然是我的）。
我怎样才能做到这一点？有可能有一个插件吗？
PS我知道如何编码，但我从未在WordPress上开发过任何东西。请具体一点:)
编辑：尝试将 iframe 放在 header.php 上：
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package staymore
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head> …我有一个外部域“domainB”，我从中提取内容。包含在domainB的脚本中的是iframeResizer.contentWindow.min.js
我的域“domainA”包括 iframeResizer.min.js，我这样称呼它：
$('iframe').iFrameResize({log:true, checkOrigin:false,
heightCalculationMethod:"taggedElement"});
无论我将“heightCalculationMethod”更改为什么，它都不会对 iframe 的高度产生任何影响。下面是日志记录
[iFrameSizer][主机页面：iFrameResizer0] 添加了缺少的 iframe ID：iFrameResizer0 ( http://domainB/ ) iframeResizer.min.js:8
[iFrameSizer][主机页面：iFrameResizer0] iFrameResizer0 iframeResizer.min.js 禁用 IFrame 滚动： 8
[iFrameSizer][主机页面：iFrameResizer0] [init] 发送消息到 iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:taggedElement:null:null:0:false:parent:scroll ) targetOrigin: * iframeResizer.min.js:8
[iFrameSizer][主机页面: iFrameResizer0] [iFrame.onload] 发送消息到 iframe[iFrameResizer0] (iFrameResizer0:8:false:true:32:true:true:null:taggedElement :null:null:0:false:parent:scroll) targetOrigin: *
所以看起来它正在工作，没有错误，但没有任何效果。有没有更好的方法来做到这一点，实际上可以改变 iframe 的高度？
我试图readyCallback()在iFrameResizer 中使用方法，但它似乎不起作用。当我将回调添加到parent iframe对象时，它永远不会被调用：
iFrameResize({
log : true,
checkOrigin: false,
minHeight : 800,
maxHeight : 4000,
readyCallback: function(){
// (!) never called
console.log('ready parent callback .. ');
},
messageCallback: function(data){
// works OK
console.log('message callback .. ');
console.log(data);
},
initCallback: function(){
// works OK
window.scrollTo(0,0);
alert("OK initiated");
},
resizedCallback : function(info){
// works OK
console.log(info);
scrollTo(0, info.iframe.offsetTop);
},
heightCalculationMethod : 'taggedElement'
}, '#iframe123');
该iframeResizer.contentWindow.js内部IFRAME元素负载和工作确定。
我错过了什么吗？谢谢你。
我正在尝试利用iFrame Resizer根据其内容（可以更改）调整同一域上 iFrame 的大小。
实例： https: //bronzecc.co.uk/sunday-2nd-xi/
我收到Uncaught ReferenceError: iFrameResize is not defined错误，但我检查了 iFrame，它们都通过 CDN 加载了正确的 JS，并且我还在该页面本身加载了正确的 JS。
为了初始化我正在使用的缩放器
var iframes = iFrameResize({log: true}, 'iframe');
MCE：https://gist.github.com/shivampaw/7b1dba5326706673a782d115358eca2a
window.html
<html>
<head>
<meta charset="UTF-8">
<title>Window</title>
</head>
<body>
<iframe src="iframe.html" style="width: 100%;" frameborder="0"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.contentWindow.min.js"></script>
<script>
iframes = iFrameResize({}, 'iframe');
</script>
</body>
</html>
iframe.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>102166</title>
</head>
<body>
<div class="table-responsive"> …