Javascript PHP：使用字符串作为Iframe的源

我有一个自定义Wordpress页面，有两个文本框，一个用于“yourvarname”，另一个用于“key”，还有一个显示google文档的iframe

这两个文本框都是从url获取的变量填充的。这个很好用

我想做的是： 让

iframe

按照文本框yourvarname中的名称显示文档

这就是我目前所拥有的

    <?php /* Template Name: CustomPageT1 */ ?>

<p><input id="yourvarname" type="text" value="" /> <input id="key" type="text" value="" />
<script type="text/javascript">// <![CDATA[
var url_string = window.location.href; //window.location.href
    var url = new URL(url_string);
    var c = url.searchParams.get("yourvarname");
    var d = url.searchParams.get("key");
    document.getElementById("yourvarname").value = c;
    document.getElementById("key").value = d;
// ]]></script>
</p>

<iframe src="https://docs.google.com/document/d/e/2PACX-1vTCJM2gUN4_aesXjEB7XtKWu0dB8anwWkjgolj1zRLU2aJieScUXF6WXzMbjYXs7g/pub?embedded=true"
width="110%"
height="500" 
class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>"

<script type="text/javascript" language="javascript">
global $wp_query;
if (isset($wp_query->query_vars['yourvarname']))
{
print $wp_query->query_vars['yourvarname'];
}
</script>

enter code here

// 

你好

$（'.myIframe'）.css（'height'，$（window.height（）+'px'）；
"
全局$wp_查询；
if（isset（$wp\u query->query\u vars['yourvarname']））
{
打印$wp_query->query_vars['yourvarname']；
}
在这里输入代码

让我们从基本信息开始。在Javascript中，您可以获得如下

iframe

s：

document.getElementsByTagName("iframe")

document.getElementsByTagName("iframe")[0]

由于您有一个

iframe

，因此可以这样获得它：

document.getElementsByTagName("iframe")

document.getElementsByTagName("iframe")[0]

但是给这个标签一个

id

可能会省去麻烦。让我们定义

iframe的
src

document.getElementsByTagName("iframe")[0].src = "somevalue";

好的，让我们在脚本中应用这一点：

var url_string = window.location.href; //window.location.href
    var url = new URL(url_string);
    var c = url.searchParams.get("yourvarname");
    var d = url.searchParams.get("key");
    document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
    document.getElementById("key").value = d;

但是，如果希望在
输入更改时更改它，则需要为其定义
更改
事件。
因此，这是我添加的内容，可能是错误的，因为我现在收到404错误，并且没有显示任何内容

<script type="text/javascript" language="javascript">
document.getElementsByTagName("iframe")[0].src = "yourvarname";
var url_string = window.location.href; //window.location.href
    var url = new URL(url_string);
    var c = url.searchParams.get("yourvarname");
    var d = url.searchParams.get("key");
    document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
    document.getElementById("key").value = d;
    </script>


document.getElementsByTagName（“iframe”）[0].src=“yourvarname”；
var url_string=window.location.href；//window.location.href
var url=新的url（url\u字符串）；
var c=url.searchParams.get（“yourvarname”）；
var d=url.searchParams.get（“key”）；
document.getElementById（“yourvarname”）.value=document.getElementsByTagName（“iframe”）.src=c；
document.getElementById（“key”）.value=d；
这就是我添加的内容，可能是错误的，因为我现在得到的是404错误文档。getElementsByTagName（“iframe”）[0]。src=“yourvarname”var url\u string=window.location.href；//window.location.href var url=new url（url\u string）；var c=url.searchParams.get（“yourvarname”）；var d=url.searchParams.get（“key”）；document.getElementById（“yourvarname”）.value=document.getElementsByTagName（“iframe”）.src=c；document.getElementById（“key”）.value=d；@BikersQRCode浏览器控制台中是否有错误？