PHP: использовать строку в качестве источника для Iframe

Question

У меня есть пользовательская страница Wordpress, с двумя текстовыми полями input, один для "yourvarname", другой для "key" и iframe для отображения документа Google.

Оба эти текстовых поля заполняются из переменных, полученных из URL. Это прекрасно работает.

Что я хотел бы сделать: Пусть iframe отобразит документ, названный в текстовом поле, ваше имя.

Это то, что у меня есть

    <?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

Answer 1

так что это то, что я добавил, возможно, неправильно, так как теперь я получаю ошибку 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>

Answer 2

Давайте начнем с базовой информации. В Javascript вы можете получить ваши iframe как:

document.getElementsByTagName("iframe")

Так как у вас есть один iframe, вы можете получить его так:

document.getElementsByTagName("iframe")[0]

, но это будетпотенциально избавит вас от неприятностей, чтобы дать id этому тегу. Давайте определим src вашего iframe

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;

Однако, если вы хотите, чтобы он изменился, когда input изменится, тогда вам нужно будет определить для него change событие.