Как подключить div к URL-адресу данных, который используется в iframe для поиска по сайту

Question

Как подключить div к URL-адресу данных, который используется в iframe для поиска по сайту

0

Есть ли способ, которым я могу подключить div к URL-адресу данных, который также связан с iframe. То, что у меня есть, - это то, что пользователь делает поиск в строке поиска, и он запрашивает этот поиск внутри фреймов, что бы я хотел сделать, вместо того, чтобы быть в состоянии передвигаться на веб-сайте, я бы хотел, чтобы чтобы пользователь мог щелкнуть по iframe и перенаправил туда браузер на страницу, запрошенную в iframe. Я попытался это сделать, создав невидимый div, который покрывает верхнюю часть iframe и затем перенаправляет их на страницу, введенную внутри div, используя переменную, но переменную, с которой вы не можете подключиться к src или URL-адресу данных. Есть ли другой переменную, которую я мог бы использовать?

(По сути, я пытаюсь сделать то же самое, что и с js, и iframe с div)

Вот код HTML/JS:

<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">        

<head>
    <link rel="stylesheet" type="text/css" href="Index.css">
</head>

<body>

        <!--The Search bar as well-->
    <form onsubmit="return virtualSubmit(this)";>
        <input name="searchtext" type="text" />
        <input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
    </form>

    <div class="holder">
        <iframe class="frame"
            src="http://www.google.com/custom"
            data-url="http://www.google.com/custom?q="
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250">
        </iframe>
        <div class="sampleDiv">
            <a class="invisibleDiv" href="http://www.google.com/custom?q="></a>
        </div>
    </div>

    <div class="holder">
        <iframe class="frame"
            src="http://en.wikipedia.org/wiki"
            data-url="http://en.wikipedia.org/wiki/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250">
        </iframe>
        <div class="sampleDiv">
            <a class="invisibleDiv" href="http://en.wikipedia.org/wiki/"></a>
        </div>
    </div>

    <div class="holder">
        <iframe class="frame"
            src="http://m.dictionary.com/definition"
            data-url="http://m.dictionary.com/definition/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250">
        </iframe>
        <div class="sampleDiv">
            <a class="invisibleDiv" href="http://m.dictionary.com/definition" data-url="http://m.dictionary.com/definition/"></a>
        </div>
    </div>

    <script>
    function virtualSubmit(form){
        var text = form.searchtext.value;
        var targets = document.getElementsByTagName('iframe'),
            items = targets.length;
        for(var i = 0; i<items; i++){
            var target = targets[i],
                url = target.getAttribute('data-url');
            target.href = url + text;
            target.src = url + text;
        }

        return false;
    }
    </script>

</body>

Вот код CSS:

    body {
    color: purple;
    background-color: #663300;
}

.holder {
    width: 400px;
    height:300px;
    position:relative;
}

.frame{
    width: 100%;
    height: 100%;
}

.sampleDiv
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:transparent;
}

.invisibleDiv
{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

a {
    display: block;
}

Ibounes 23 март 2014, в 19:35

Источник

Теги:

javascript

html

css

iframe

1 ответ

Ещё вопросы

Oli · Answer 1 · 2014-03-23T15-53-00.000Z

для перенаправления браузера на ссылку, нажатую в iframe, используйте родительский объект (объект страницы, где находится ваш iframe)... поэтому в вашем коде iframe вы бы использовали что-то вроде этого:

<a onclick="redirect()">click</a>
<script>
  function redirect() {
    this.parent.location="http://www.acme.org";
  }
</script>

хорошо, теперь я лучше понимаю, чего вы пытаетесь достичь. Я думаю, это невозможно, поскольку вы не можете контролировать содержимое iframe. Он уже может иметь целевой атрибут ссылок и т.д., И вы в основном планируете перехватывать или переопределять это...

Я пытаюсь перенаправить их на запрашиваемый поиск в iframe, если вы видите javascript, в котором он указан как data-url, поэтому, когда пользователь ищет что-то в моей строке поиска, он ищет все сайты в iframe, которые я пытаюсь получить это так перенаправить их на поисковый сайт.