How can I insert a variable in iframe src to reach felixibilty for open the various sites? (by: html page and javascript )

Question

I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.

Indeed I need a type of code like bellow:

<html>
    <body>
        <script type="text/javascript">
            var userInput_stringVariable= "this part is user desired input string" ;
            var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
        </script>
        <iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
    </body>
</html>

This code doesn't work, while I need a code like this to work with!

Possible duplicate of [dynamically set iframe src](https://stackoverflow.com/questions/6000987/dynamically-set-iframe-src) — Ahmed Yousif, Sep 02 '18 at 09:43

iDouglas · Answer 1 · 2018-09-02T10:24:39.690

Here is a function that will probably do what you want:

<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");

if (userImput_stringVariable != null) {
    document.getElementById("getPage").innerHTML =
    "<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>

Just add

    <body onload="selectPage()">

somewhere in the body so the function runs when the page does.

It'll open a prompt, the user then has to enter the address.

Also you'll need this in the body too:

    <p id="getPage"></p>

It creates a paragraph with the contents of the iframe within the fuction.

score 0 · Accepted Answer · answered Sep 02 '18 at 10:06

A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.

HTML

<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>

Script

<script>
function mySubmit() {
        let getInput = answer.value;
        var address;
        address = "https://en.wikipedia.org/wiki/" + getInput;
        document.getElementById('search').src = address;
}
</script>

How can I insert a variable in iframe src to reach felixibilty for open the various sites? (by: html page and javascript )

2 Answers2